<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  <meta charset="UTF-8">
  <meta 
    name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <meta 
    http-equiv="X-UA-Compatible" 
    content="ie=edge">
  <meta 
    name="theme-color" 
    content="#fff" 
    id="theme-color">
  <meta 
    name="description" 
    content="hexoDemo用于介绍如何使用hexo">
  <link 
    rel="icon" 
    href="/">
  <title>19-数组的常见方法</title>
  
    
      <meta 
        property="og:title" 
        content="19-数组的常见方法">
    
    
      <meta 
        property="og:url" 
        content="https://zwl5670.gitee.io/2004/03/01/04-JavaScript%E5%9F%BA%E7%A1%80/19-%E6%95%B0%E7%BB%84%E7%9A%84%E5%B8%B8%E8%A7%81%E6%96%B9%E6%B3%95/index.html">
    
    
      <meta 
        property="og:img" 
        content="https://img.songhn.com/img/Y67gdd.png">
    
    
      <meta 
        property="og:img" 
        content="hexoDemo用于介绍如何使用hexo">
    
    
      <meta 
        property="og:type" 
        content="article">
      <meta 
        property="og:article:published_time" 
        content="2004-03-01">
      <meta 
        property="og:article:modified_time" 
        content="2023-03-14">
      <meta 
        property="og:article:author" 
        content="zwl5670">
      
        
          <meta 
            property="og:article:tag" 
            content="JS基础">
        
      
    
  
  
  <link rel="preload" href="//at.alicdn.com/t/font_1946621_i1kgafibvw.css" as="style" >
  <link rel="preload" href="//at.alicdn.com/t/font_1952792_89b4ac4k4up.css" as="style" >
  <link rel="preload" href="/css/main.css" as="style" >
  
  <link rel="modulepreload" href="//instant.page/5.1.0">
  
  <link rel="stylesheet" href="/css/main.css">
  
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1946621_i1kgafibvw.css">
  
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1952792_89b4ac4k4up.css">
  
  
  
    <link rel="stylesheet" href="/js/lib/lightbox/baguetteBox.min.css">
  
  <script>
    function loadScript(url, cb) {
      var script = document.createElement('script');
      script.src = url;
      if (cb) script.onload = cb;
      script.async = true;
      document.body.appendChild(script);
    }
    function loadCSS(href, data, attr) {
      var sheet = document.createElement('link');
      sheet.ref = 'stylesheet';
      sheet.href = href;
      sheet.dataset[data] = attr;
      document.head.appendChild(sheet);
    }
    function changeCSS(cssFile, data, attr) {
      var oldlink = document.querySelector(data);
      var newlink = document.createElement("link");
      newlink.setAttribute("rel", "stylesheet");
      newlink.setAttribute("href", cssFile);
      newlink.dataset.prism = attr;
      document.head.replaceChild(newlink, oldlink);
    }
  </script>
  
    
  
  <script>
    // control reverse button
    var reverseDarkList = {
      dark: 'light',
      light: 'dark'
    };
    var themeColor = {
      dark: '#1c1c1e',
      light: '#fff'
    }
    // get the data of css prefers-color-scheme
    var getCssMediaQuery = function() {
      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    };
    // reverse current darkmode setting function
    var reverseDarkModeSetting = function() {
      var setting = localStorage.getItem('user-color-scheme');
      if(reverseDarkList[setting]) {
        setting = reverseDarkList[setting];
      } else if(setting === null) {
        setting = reverseDarkList[getCssMediaQuery()];
      } else {
        return;
      }
      localStorage.setItem('user-color-scheme', setting);
      return setting;
    };
    // apply current darkmode setting
  </script>
  
    <script>
      var setDarkmode = function(mode) {
      var setting = mode || localStorage.getItem('user-color-scheme');
      if(setting === getCssMediaQuery()) {
        document.documentElement.removeAttribute('data-user-color-scheme');
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[setting];
        document.getElementById('theme-color').dataset.mode = setting;
      } else if(reverseDarkList[setting]) {
        document.documentElement.setAttribute('data-user-color-scheme', setting);
        document.getElementById('theme-color').content = themeColor[setting];
        document.getElementById('theme-color').dataset.mode = setting;
      } else {
        document.documentElement.removeAttribute('data-user-color-scheme');
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[getCssMediaQuery()];
        document.getElementById('theme-color').dataset.mode = getCssMediaQuery();
      }
    };
    setDarkmode();
    </script>
  
  
  
    <link rel="preload" href="/js/lib/lightbox/baguetteBox.min.js" as="script">
    <link rel="preload" href="/js/lib/lightbox/baguetteBox.min.css" as="style" >
  
  
    <link rel="preload" href="/js/lib/lozad.min.js" as="script">
  
  
  
  
  
  
<meta name="generator" content="Hexo 6.3.0"></head>

  <body>
    <div class="wrapper">
       
      <nav class="navbar">
  <div class="navbar-logo">
    <a class="navbar-logo-main" href="/">
      
      <span class="navbar-logo-dsc">前端面试</span>
      </a>
  </div>
  <div class="navbar-menu">
    
      <a 
        href="/" 
        class="navbar-menu-item">
        
          首页
        
      </a>
    
      <a 
        href="/archives" 
        class="navbar-menu-item">
        
          归档
        
      </a>
    
      <a 
        href="/tags" 
        class="navbar-menu-item">
        
          标签
        
      </a>
    
      <a 
        href="/categories" 
        class="navbar-menu-item">
        
          分类
        
      </a>
    
      <a 
        href="/about" 
        class="navbar-menu-item">
        
          关于
        
      </a>
    
      <a 
        href="/links" 
        class="navbar-menu-item">
        
          友链
        
      </a>
    
    <button 
      class="navbar-menu-item darknavbar navbar-menu-btn" 
      aria-label="Toggle dark mode"
      id="dark">
      <i class="iconfont icon-weather"></i>
    </button>
    <button 
      class="navbar-menu-item searchnavbar navbar-menu-btn" 
      aria-label="Toggle search"
      id="search">
      <!-- <i 
        class="iconfont icon-search" 
        style="font-size: 1.2rem; font-weight: 400;">
      </i> -->
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
        class="iconify iconify--ion" width="28" height="28" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512">
        <path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="28"
          d="M256 80a176 176 0 1 0 176 176A176 176 0 0 0 256 80Z"></path>
        <path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="28"
          d="M232 160a72 72 0 1 0 72 72a72 72 0 0 0-72-72Z"></path>
        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="28"
          d="M283.64 283.64L336 336"></path>
      </svg>
    </button>
  </div>
</nav> 
      
      <div 
        id="local-search" 
        style="display: none">
        <input
          class="navbar-menu-item"
          id="search-input"
          placeholder="请输入搜索内容..." />
        <div id="search-content"></div>
      </div>
      
      <div class="section-wrap">
        <div class="container">
          <div class="columns">
            <aside class="left-column">
              
              <div class="card card-author">
                
  <img 
    src="https://img.songhn.com/img/Y67gdd.png" 
    class="author-img"
    width="88"
    height="88"
    alt="author avatar">

<p class="author-name">zwl5670</p>
<p class="author-description">前端学习资料</p>
<div class="author-message">
  <a 
    class="author-posts-count" 
    href="/archives">
    <span>215</span>
    <span>文章</span>
  </a>
  <a 
    class="author-categories-count" 
    href="/categories">
    <span>14</span>
    <span>分类</span>
  </a>
  <a 
    class="author-tags-count" 
    href="/tags">
    <span>14</span>
    <span>标签</span>
  </a>
</div>

              </div>
               <div class="sticky-tablet">
  
  
    <article class="display-when-two-columns spacer">
      <div class="card card-content toc-card">
        <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95%E6%B8%85%E5%8D%95"><span class="toc-text">数组的方法清单</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E7%B1%BB%E5%9E%8B%E7%9B%B8%E5%85%B3"><span class="toc-text">数组的类型相关</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0%E7%9A%84%E6%B7%BB%E5%8A%A0%E5%92%8C%E5%88%A0%E9%99%A4"><span class="toc-text">数组元素的添加和删除</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E6%8E%92%E5%BA%8F"><span class="toc-text">数组排序</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9F%A5%E6%89%BE%E6%95%B0%E7%BB%84%E7%9A%84%E5%85%83%E7%B4%A0"><span class="toc-text">查找数组的元素</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84"><span class="toc-text">遍历数组</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#isArray-%EF%BC%9A%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E4%B8%BA%E6%95%B0%E7%BB%84"><span class="toc-text">isArray()：判断是否为数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E8%BD%AC%E6%8D%A2%E4%B8%BA%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-text">数组转换为字符串</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F1%E3%80%81toString"><span class="toc-text">方式1、toString()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-2"><span class="toc-text">方式 2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-3%EF%BC%9Ajoin-%E6%96%B9%E6%B3%95"><span class="toc-text">方式 3：join()方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#join"><span class="toc-text">join()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#split"><span class="toc-text">split()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Array-from-%EF%BC%9A%E5%B0%86%E4%BC%AA%E6%95%B0%E7%BB%84%E8%BD%AC%E6%8D%A2%E4%B8%BA%E7%9C%9F%E6%95%B0%E7%BB%84"><span class="toc-text">Array.from()：将伪数组转换为真数组</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BC%AA%E6%95%B0%E7%BB%84%E4%B8%8E%E7%9C%9F%E6%95%B0%E7%BB%84%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-text">伪数组与真数组的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BC%AA%E6%95%B0%E7%BB%84%E4%B8%BE%E4%BE%8B"><span class="toc-text">伪数组举例</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Array-of-%EF%BC%9A%E5%88%9B%E5%BB%BA%E6%95%B0%E7%BB%84"><span class="toc-text">Array.of()：创建数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0%E7%9A%84%E6%B7%BB%E5%8A%A0%E5%92%8C%E5%88%A0%E9%99%A4-1"><span class="toc-text">数组元素的添加和删除</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#push"><span class="toc-text">push()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#pop"><span class="toc-text">pop()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#unshift"><span class="toc-text">unshift()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#shift"><span class="toc-text">shift()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#splice"><span class="toc-text">splice()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#concat"><span class="toc-text">concat()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#slice"><span class="toc-text">slice()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#fill"><span class="toc-text">fill()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#reverse"><span class="toc-text">reverse()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#sort"><span class="toc-text">sort()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A0%E5%8F%82%E6%97%B6"><span class="toc-text">无参时</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%A6%E5%8F%82%E6%97%B6%EF%BC%8C%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8E%92%E5%BA%8F%E8%A7%84%E5%88%99"><span class="toc-text">带参时，自定义排序规则</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BE%E4%BE%8B%EF%BC%9A%E5%B0%86%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E6%95%B0%E5%AD%97%E6%8C%89%E7%85%A7%E4%BB%8E%E5%B0%8F%E5%88%B0%E5%A4%A7%E6%8E%92%E5%BA%8F"><span class="toc-text">举例：将数组中的数字按照从小到大排序</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BE%E4%BE%8B%EF%BC%9A%E5%B0%86%E6%95%B0%E7%BB%84%E4%BB%8E%E5%B0%8F%E5%88%B0%E5%A4%A7%E6%8E%92%E5%BA%8F"><span class="toc-text">举例：将数组从小到大排序</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#indexOf-%E5%92%8C-lastIndexOf-%EF%BC%9A%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9A%84%E7%B4%A2%E5%BC%95"><span class="toc-text">indexOf() 和 lastIndexOf()：获取元素的索引</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#includes"><span class="toc-text">includes()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#find-%E5%92%8CfindIndex"><span class="toc-text">find()和findIndex()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#find"><span class="toc-text">find()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#findIndex"><span class="toc-text">findIndex()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#every-%E5%92%8Csome"><span class="toc-text">every()和some()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#every"><span class="toc-text">every()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#some"><span class="toc-text">some()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#every-%E5%92%8C-some-%E7%9A%84%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-text">every() 和 some() 的使用场景</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#valueOf-%EF%BC%9A%E8%BF%94%E5%9B%9E%E6%95%B0%E7%BB%84%E6%9C%AC%E8%BA%AB"><span class="toc-text">valueOf()：返回数组本身</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84-1"><span class="toc-text">遍历数组</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A6%82%E5%BF%B5"><span class="toc-text">概念</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#for-%E5%BE%AA%E7%8E%AF%E9%81%8D%E5%8E%86"><span class="toc-text">for 循环遍历</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#forEach"><span class="toc-text">forEach()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95"><span class="toc-text">语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#forEach-%E4%BC%9A%E4%B8%8D%E4%BC%9A%E6%94%B9%E5%8F%98%E5%8E%9F%E6%95%B0%E7%BB%84%EF%BC%9F"><span class="toc-text">forEach() 会不会改变原数组？</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#for-of"><span class="toc-text">for of</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95-1"><span class="toc-text">语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8D%E8%A6%81%E4%BD%BF%E7%94%A8-for-in-%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84"><span class="toc-text">不要使用 for in 遍历数组</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#map"><span class="toc-text">map()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95-2"><span class="toc-text">语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#map-%E6%96%B9%E6%B3%95%E4%BC%9A%E4%B8%8D%E4%BC%9A%E6%94%B9%E5%8F%98%E5%8E%9F%E6%95%B0%E7%BB%84%EF%BC%9F"><span class="toc-text">map() 方法会不会改变原数组？</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#filter"><span class="toc-text">filter()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#reduce"><span class="toc-text">reduce()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#reduce-%E8%AF%AD%E6%B3%95"><span class="toc-text">reduce() 语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#reduce-%E7%9A%84%E5%B8%B8%E8%A7%81%E5%BA%94%E7%94%A8"><span class="toc-text">reduce() 的常见应用</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%BB%83%E4%B9%A0"><span class="toc-text">数组练习</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#splice-%E7%BB%83%E4%B9%A0%EF%BC%9A%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D"><span class="toc-text">splice()练习：数组去重</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%85%E7%A9%BA%E6%95%B0%E7%BB%84"><span class="toc-text">清空数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#join-%E7%BB%83%E4%B9%A0"><span class="toc-text">join() 练习</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#reverse-%E7%BB%83%E4%B9%A0"><span class="toc-text">reverse() 练习</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%83%E4%B9%A0%EF%BC%9A%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D"><span class="toc-text">练习：数组去重</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85"><span class="toc-text">赞赏作者</span></a></li></ol>
      </div>
    </article>
  
  
  <article class="card card-content categories-widget">
    <div class="categories-card">
  <div class="categories-header">
    <i 
      class="iconfont icon-fenlei" 
      style="padding-right: 2px;">
    </i>分类
  </div>
  <div class="categories-list">
    
      <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/">
        <div class="categories-list-item">
          前端工具
          <span class="categories-list-item-badge">13</span>
        </div>
      </a>
    
      <a href="/categories/CSS%E5%9F%BA%E7%A1%80/">
        <div class="categories-list-item">
          CSS基础
          <span class="categories-list-item-badge">18</span>
        </div>
      </a>
    
      <a href="/categories/CSS%E8%BF%9B%E9%98%B6/">
        <div class="categories-list-item">
          CSS进阶
          <span class="categories-list-item-badge">9</span>
        </div>
      </a>
    
      <a href="/categories/HTML/">
        <div class="categories-list-item">
          HTML
          <span class="categories-list-item-badge">12</span>
        </div>
      </a>
    
      <a href="/categories/JS%E5%9F%BA%E7%A1%80/">
        <div class="categories-list-item">
          JS基础
          <span class="categories-list-item-badge">56</span>
        </div>
      </a>
    
      <a href="/categories/JS%E5%9F%BA%E7%A1%80ES6/">
        <div class="categories-list-item">
          JS基础ES6
          <span class="categories-list-item-badge">10</span>
        </div>
      </a>
    
      <a href="/categories/JS%E5%9F%BA%E7%A1%80%E5%BC%82%E6%AD%A5/">
        <div class="categories-list-item">
          JS基础异步
          <span class="categories-list-item-badge">11</span>
        </div>
      </a>
    
      <a href="/categories/JS%E8%BF%9B%E9%98%B6/">
        <div class="categories-list-item">
          JS进阶
          <span class="categories-list-item-badge">11</span>
        </div>
      </a>
    
      <a href="/categories/%E7%A7%BB%E5%8A%A8web/">
        <div class="categories-list-item">
          移动web
          <span class="categories-list-item-badge">3</span>
        </div>
      </a>
    
      <a href="/categories/CSS%E5%92%8CDOM/">
        <div class="categories-list-item">
          CSS和DOM
          <span class="categories-list-item-badge">6</span>
        </div>
      </a>
    
      <a href="/categories/Node/">
        <div class="categories-list-item">
          Node
          <span class="categories-list-item-badge">16</span>
        </div>
      </a>
    
      <a href="/categories/Vue%E5%9F%BA%E7%A1%80/">
        <div class="categories-list-item">
          Vue基础
          <span class="categories-list-item-badge">15</span>
        </div>
      </a>
    
      <a href="/categories/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/">
        <div class="categories-list-item">
          性能优化
          <span class="categories-list-item-badge">7</span>
        </div>
      </a>
    
      <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/">
        <div class="categories-list-item">
          前端工程化
          <span class="categories-list-item-badge">8</span>
        </div>
      </a>
    
  </div>
</div>
  </article>
  
  <article class="card card-content tags-widget">
    <div class="tags-card">
  <div class="tags-header">
    <i 
      class="iconfont icon-biaoqian" 
      style="padding-right: 2px;">
    </i>热门标签
  </div>
  <div class="tags-list">
    
      <a 
        href="/tags/JS%E5%9F%BA%E7%A1%80/" 
        title="JS基础">
        <div class="tags-list-item">JS基础</div>
      </a>
    
      <a 
        href="/tags/CSS%E5%9F%BA%E7%A1%80/" 
        title="CSS基础">
        <div class="tags-list-item">CSS基础</div>
      </a>
    
      <a 
        href="/tags/Node/" 
        title="Node">
        <div class="tags-list-item">Node</div>
      </a>
    
      <a 
        href="/tags/Vue%E5%9F%BA%E7%A1%80/" 
        title="Vue基础">
        <div class="tags-list-item">Vue基础</div>
      </a>
    
      <a 
        href="/tags/%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/" 
        title="前端工具">
        <div class="tags-list-item">前端工具</div>
      </a>
    
      <a 
        href="/tags/HTML/" 
        title="HTML">
        <div class="tags-list-item">HTML</div>
      </a>
    
      <a 
        href="/tags/JS%E8%BF%9B%E9%98%B6/" 
        title="JS进阶">
        <div class="tags-list-item">JS进阶</div>
      </a>
    
      <a 
        href="/tags/JS%E5%9F%BA%E7%A1%80%E5%BC%82%E6%AD%A5/" 
        title="JS基础异步">
        <div class="tags-list-item">JS基础异步</div>
      </a>
    
      <a 
        href="/tags/JS%E5%9F%BA%E7%A1%80ES6/" 
        title="JS基础ES6">
        <div class="tags-list-item">JS基础ES6</div>
      </a>
    
      <a 
        href="/tags/CSS%E8%BF%9B%E9%98%B6/" 
        title="CSS进阶">
        <div class="tags-list-item">CSS进阶</div>
      </a>
    
      <a 
        href="/tags/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" 
        title="前端工程化">
        <div class="tags-list-item">前端工程化</div>
      </a>
    
      <a 
        href="/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" 
        title="性能优化">
        <div class="tags-list-item">性能优化</div>
      </a>
    
      <a 
        href="/tags/CSS%E5%92%8CDOM/" 
        title="CSS和DOM">
        <div class="tags-list-item">CSS和DOM</div>
      </a>
    
      <a 
        href="/tags/%E7%A7%BB%E5%8A%A8web/" 
        title="移动web">
        <div class="tags-list-item">移动web</div>
      </a>
    
  </div>
</div>
  </article>
  
  
</div>
            </aside>
            <main class="main-column">
              
<article class="card card-content">
  <header>
    <h1 class="post-title">
      19-数组的常见方法
    </h1>
  </header>
  <div class="post-meta post-show-meta">
    <time datetime="2004-02-29T16:00:00.000Z">
      <i 
        class="iconfont icon-calendar" 
        style="margin-right: 2px;">
      </i>
      <span>2004-03-01</span>
    </time>
    
      <span class="dot"></span>
      
        <a 
          href="/categories/JS%E5%9F%BA%E7%A1%80/" 
          class="post-meta-link">
          JS基础
        </a>
      
    
    
      <span class="dot"></span>
      <span>11.4k 字</span>
    
  </div>
  
    <div 
      class="post-meta post-show-meta" 
      style="margin-top: -10px;">
      <div style="display: flex; align-items: center;">
        <i 
          class="iconfont icon-biaoqian" 
          style="margin-right: 2px; font-size: 1.15rem;">
        </i>
        
          
          <a 
            href="/tags/JS%E5%9F%BA%E7%A1%80/" 
            class="post-meta-link">
            JS基础
          </a>
        
      </div>
    </div>
  
  </header>
  <div 
    id="section" 
    class="post-content">
    <p><ArticleTopAd></ArticleTopAd></p>
<h2 id="数组的方法清单"><a href="#数组的方法清单" class="headerlink" title="数组的方法清单"></a>数组的方法清单</h2><h3 id="数组的类型相关"><a href="#数组的类型相关" class="headerlink" title="数组的类型相关"></a>数组的类型相关</h3><table>
<thead>
<tr>
<th align="left">方法</th>
<th align="left">描述</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left">Array.isArray()</td>
<td align="left">判断是否为数组</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">toString()</td>
<td align="left">将数组转换为字符串</td>
<td align="left">不会改变原数组</td>
</tr>
<tr>
<td align="left">join()</td>
<td align="left">将数组转换为字符串，返回结果为<strong>转换后的字符串</strong></td>
<td align="left">不会改变原数组</td>
</tr>
<tr>
<td align="left">字符串的方法：split()</td>
<td align="left">将字符串按照指定的分隔符，组装为数组</td>
<td align="left">不会改变原字符串</td>
</tr>
<tr>
<td align="left"></td>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr>
<td align="left">Array.from(arrayLike)</td>
<td align="left">将<strong>伪数组</strong>转化为<strong>真数组</strong></td>
<td align="left"></td>
</tr>
<tr>
<td align="left">Array.of(value1, value2, value3)</td>
<td align="left">创建数组：将<strong>一系列值</strong>转换成数组</td>
<td align="left"></td>
</tr>
</tbody></table>
<p>注意：</p>
<p>（1）获取数组的长度是用<code>length</code>属性，不是方法。关于 <code>length</code>属性，详见上一篇文章。</p>
<p>（2）<code>split()</code>是字符串的方法，不是数组的方法。</p>
<h3 id="数组元素的添加和删除"><a href="#数组元素的添加和删除" class="headerlink" title="数组元素的添加和删除"></a>数组元素的添加和删除</h3><table>
<thead>
<tr>
<th align="left">方法</th>
<th align="left">描述</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left">push()</td>
<td align="left">向数组的<strong>最后面</strong>插入一个或多个元素，返回结果为新数组的<strong>长度</strong></td>
<td align="left">会改变原数组</td>
</tr>
<tr>
<td align="left">pop()</td>
<td align="left">删除数组中的<strong>最后一个</strong>元素，返回结果为<strong>被删除的元素</strong></td>
<td align="left">会改变原数组</td>
</tr>
<tr>
<td align="left">unshift()</td>
<td align="left">在数组<strong>最前面</strong>插入一个或多个元素，返回结果为新数组的<strong>长度</strong></td>
<td align="left">会改变原数组</td>
</tr>
<tr>
<td align="left">shift()</td>
<td align="left">删除数组中的<strong>第一个</strong>元素，返回结果为<strong>被删除的元素</strong></td>
<td align="left">会改变原数组</td>
</tr>
<tr>
<td align="left"></td>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr>
<td align="left">splice()</td>
<td align="left">从数组中<strong>删除</strong>指定的一个或多个元素，返回结果为<strong>被删除元素组成的新数组</strong></td>
<td align="left">会改变原数组</td>
</tr>
<tr>
<td align="left">slice()</td>
<td align="left">从数组中<strong>提取</strong>指定的一个或多个元素，返回结果为<strong>新的数组</strong></td>
<td align="left">不会改变原数组</td>
</tr>
<tr>
<td align="left"></td>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr>
<td align="left">concat()</td>
<td align="left">合并数组：连接两个或多个数组，返回结果为<strong>新的数组</strong></td>
<td align="left">不会改变原数组</td>
</tr>
<tr>
<td align="left">fill()</td>
<td align="left">填充数组：用固定的值填充数组，返回结果为<strong>新的数组</strong></td>
<td align="left">会改变原数组</td>
</tr>
</tbody></table>
<h3 id="数组排序"><a href="#数组排序" class="headerlink" title="数组排序"></a>数组排序</h3><table>
<thead>
<tr>
<th align="left">方法</th>
<th align="left">描述</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left">reverse()</td>
<td align="left">反转数组，返回结果为<strong>反转后的数组</strong></td>
<td align="left">会改变原数组</td>
</tr>
<tr>
<td align="left">sort()</td>
<td align="left">对数组的元素,默认按照<strong>Unicode 编码</strong>，从小到大进行排序</td>
<td align="left">会改变原数组</td>
</tr>
</tbody></table>
<h3 id="查找数组的元素"><a href="#查找数组的元素" class="headerlink" title="查找数组的元素"></a>查找数组的元素</h3><table>
<thead>
<tr>
<th align="left">方法</th>
<th align="left">描述</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left">indexOf(value)</td>
<td align="left">从前往后索引，检索一个数组中是否含有指定的元素</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">lastIndexOf(value)</td>
<td align="left">从后往前索引，检索一个数组中是否含有指定的元素</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">includes(item)</td>
<td align="left">数组中是否包含指定的内容</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">find(function())</td>
<td align="left">找出<strong>第一个</strong>满足「指定条件返回 true」的元素</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">findIndex(function())</td>
<td align="left">找出<strong>第一个</strong>满足「指定条件返回 true」的元素的 index</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">every()</td>
<td align="left">确保数组中的每个元素都满足「指定条件返回 true」，则停止遍历，此方法才返回 true</td>
<td align="left">全真才为真。要求每一项都返回 true，最终的结果才返回 true</td>
</tr>
<tr>
<td align="left">some()</td>
<td align="left">数组中只要有一个元素满足「指定条件返回 true」，则停止遍历，此方法就返回 true</td>
<td align="left">一真即真。只要有一项返回 true，最终的结果就返回 true</td>
</tr>
</tbody></table>
<h3 id="遍历数组"><a href="#遍历数组" class="headerlink" title="遍历数组"></a>遍历数组</h3><table>
<thead>
<tr>
<th align="left">方法</th>
<th align="left">描述</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left">for 循环</td>
<td align="left">最传统的方式遍历数组，这个大家都懂</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">forEach()</td>
<td align="left">遍历数组，但需要兼容 IE8 以上</td>
<td align="left">不会改变原数组。forEach() 没有返回值。也就是说，它的返回值是 undefined</td>
</tr>
<tr>
<td align="left">for of</td>
<td align="left">遍历数组（ES6语法）</td>
<td align="left">不会改变原数组。另外，不要使用 for in 遍历数组</td>
</tr>
<tr>
<td align="left">map()</td>
<td align="left">对原数组中的每一项进行加工，将组成新的数组</td>
<td align="left">不会改变原数组</td>
</tr>
<tr>
<td align="left">filter()</td>
<td align="left">过滤数组：返回结果是 true 的项，将组成新的数组，返回结果为<strong>新的数组</strong></td>
<td align="left">不会改变原数组</td>
</tr>
<tr>
<td align="left">reduce</td>
<td align="left">接收一个函数作为累加器，返回值是回调函数累计处理的结果</td>
<td align="left">比较复杂</td>
</tr>
</tbody></table>
<h2 id="isArray-：判断是否为数组"><a href="#isArray-：判断是否为数组" class="headerlink" title="isArray()：判断是否为数组"></a>isArray()：判断是否为数组</h2><p>语法：</p>
<pre class="highlight"><span class="line">布尔值 = <span class="title class_">Array</span>.<span class="title function_">isArray</span>(被检测的数组);</span><br></pre>

<p>以前，我们会通过 <code>A instanceof B</code>来判断 A 是否属于 B 类型。但是在数组里，这种 instanceof 方法已经用的不多了，因为有 isArray()方法。</p>
<h2 id="数组转换为字符串"><a href="#数组转换为字符串" class="headerlink" title="数组转换为字符串"></a>数组转换为字符串</h2><p>数组转为字符串，有三种方式。</p>
<h3 id="方式1、toString"><a href="#方式1、toString" class="headerlink" title="方式1、toString()"></a>方式1、toString()</h3><pre class="highlight"><span class="line"><span class="comment">// 语法</span></span><br><span class="line">字符串 = 数组.<span class="title function_">toString</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 举例</span></span><br><span class="line"><span class="keyword">const</span> result = [<span class="number">1</span>, <span class="number">3</span>, <span class="number">5</span>].<span class="title function_">toString</span>(); <span class="comment">// 转换结果 result 为字符串 &#x27;1, 3, 5&#x27;</span></span><br></pre>

<p>解释：把数组转换成字符串，每一项用英文逗号<code>,</code>分割。</p>
<p>备注：大多数的数据类型都可以使用<code>.toString()</code>方法，将其转换为字符串。</p>
<h3 id="方式-2"><a href="#方式-2" class="headerlink" title="方式 2"></a>方式 2</h3><pre class="highlight"><span class="line"><span class="comment">// 语法</span></span><br><span class="line">字符串 = <span class="title class_">String</span>(数组);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 举例</span></span><br><span class="line"><span class="keyword">const</span> result = <span class="title class_">String</span>([<span class="number">1</span>, <span class="number">3</span>, <span class="number">5</span>]); <span class="comment">// 转换结果 result 为字符串 &#x27;1, 3, 5&#x27;</span></span><br></pre>

<h3 id="方式-3：join-方法"><a href="#方式-3：join-方法" class="headerlink" title="方式 3：join()方法"></a>方式 3：join()方法</h3><pre class="highlight"><span class="line">字符串 = 数组.<span class="title function_">join</span>(<span class="string">&#x27;,&#x27;</span>); <span class="comment">// 将数组转为字符串，每一项用 英文逗号 分隔</span></span><br></pre>

<p>关于 join()方法的详细介绍，详见下一段。</p>
<h2 id="join"><a href="#join" class="headerlink" title="join()"></a>join()</h2><p><code>join()</code>：将数组转换为字符串，返回结果为<strong>转换后的字符串</strong>（不会改变原来的数组）。</p>
<p>补充：<code>join()</code>方法可以指定一个<strong>字符串</strong>作为参数，这个参数是元素之间的<strong>连接符</strong>；如果不指定连接符，则默认使用英文逗号<code>,</code> 作为连接符，此时和 <code>toString()的</code>效果是一致的。</p>
<p>语法：</p>
<pre class="highlight"><span class="line">新的字符串 = 原数组.<span class="title function_">join</span>(参数); <span class="comment">// 参数选填</span></span><br></pre>

<p>代码举例：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> arr = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> result1 = arr.<span class="title function_">join</span>(); <span class="comment">// 这里没有指定连接符，所以默认使用 , 作为连接符</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> result2 = arr.<span class="title function_">join</span>(<span class="string">&#x27;-&#x27;</span>); <span class="comment">// 使用指定的字符串作为连接符</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> arr); <span class="comment">// 打印结果：object</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> result1); <span class="comment">// 打印结果：string</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result1：&#x27;</span> + result1);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result2：&#x27;</span> + result2);</span><br></pre>

<p>上方代码中，最后三行的打印结果是：</p>
<pre class="highlight"><span class="line">arr =[<span class="string">&quot;a&quot;</span>,<span class="string">&quot;b&quot;</span>,<span class="string">&quot;c&quot;</span>]</span><br><span class="line">result1:a,b,c</span><br><span class="line">result2:a-b-c</span><br></pre>

<h2 id="split"><a href="#split" class="headerlink" title="split()"></a>split()</h2><blockquote>
<p>注意，<code>split()</code>是字符串的方法，不是数组的方法。</p>
</blockquote>
<p>语法：</p>
<pre class="highlight"><span class="line">新的数组 = str.<span class="title function_">split</span>(分隔符);</span><br></pre>

<p>解释：通过指定的分隔符，将一个字符串拆分成一个<strong>数组</strong>。不会改变原字符串。</p>
<p>备注：<code>split()</code>这个方法在实际开发中用得非常多。一般来说，从接口拿到的 json 数据中，经常会收到类似于<code>&quot;q, i, a, n&quot;</code>这样的字符串，前端需要将这个字符串拆分成<code>[&#39;q&#39;, &#39;i&#39;, &#39;a&#39;, &#39;n&#39;]</code>数组，这个时候<code>split()</code>方法就派上用场了。</p>
<h2 id="Array-from-：将伪数组转换为真数组"><a href="#Array-from-：将伪数组转换为真数组" class="headerlink" title="Array.from()：将伪数组转换为真数组"></a>Array.from()：将伪数组转换为真数组</h2><p><strong>语法</strong>：</p>
<pre class="highlight"><span class="line">array = <span class="title class_">Array</span>.<span class="title function_">from</span>(arrayLike);</span><br></pre>

<p><strong>作用</strong>：将<strong>伪数组</strong>或可遍历对象转换为<strong>真数组</strong>。</p>
<p>代码举例：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> name = <span class="string">&#x27;qianguyihao&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>.<span class="title function_">from</span>(name)); <span class="comment">// 打印结果是数组：[&quot;q&quot;,&quot;i&quot;,&quot;a&quot;,&quot;n&quot;,&quot;g&quot;,&quot;u&quot;,&quot;y&quot;,&quot;i&quot;,&quot;h&quot;,&quot;a&quot;,&quot;o&quot;]</span></span><br></pre>

<h3 id="伪数组与真数组的区别"><a href="#伪数组与真数组的区别" class="headerlink" title="伪数组与真数组的区别"></a>伪数组与真数组的区别</h3><p><strong>伪数组</strong>：包含 length 属性的对象或可迭代的对象。</p>
<p>另外，伪数组的原型链中没有 Array.prototype，而真数组的原型链中有 Array.prototype。因此伪数组没有数组的一般方法，比如 pop()、join() 等方法。</p>
<h3 id="伪数组举例"><a href="#伪数组举例" class="headerlink" title="伪数组举例"></a>伪数组举例</h3><pre class="highlight"><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span>&gt;</span>按钮1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span>&gt;</span>按钮2<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span>&gt;</span>按钮3<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">let</span> btnArray = <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&#x27;button&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(btnArray);</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(btnArray[<span class="number">0</span>]);</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre>

<p>上面的布局中，有三个 button 标签，我们通过<code>getElementsByTagName</code>获取到的<code>btnArray</code>实际上是<strong>伪数组</strong>，并不是真实的数组：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180402_1116.png" class="lozad post-image"src="http://img.smyhvae.com/20180402_1116.png"></p>
<p>既然<code>btnArray</code>是伪数组，它就不能使用数组的一般方法，否则会报错：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180402_1121.png" class="lozad post-image"src="http://img.smyhvae.com/20180402_1121.png"></p>
<p>解决办法：采用<code>Array.from</code>方法将<code>btnArray</code>这个伪数组转换为真数组即可：</p>
<pre class="highlight"><span class="line"><span class="title class_">Array</span>.<span class="title function_">from</span>(btnArray);</span><br></pre>

<p>然后就可以使用数组的一般方法了：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180402_1125.png" class="lozad post-image"src="http://img.smyhvae.com/20180402_1125.png"></p>
<h2 id="Array-of-：创建数组"><a href="#Array-of-：创建数组" class="headerlink" title="Array.of()：创建数组"></a>Array.of()：创建数组</h2><p><strong>语法</strong>：</p>
<pre class="highlight"><span class="line"><span class="title class_">Array</span>.<span class="title function_">of</span>(value1, value2, value3);</span><br></pre>

<p><strong>作用</strong>：根据参数里的内容，创建数组。</p>
<p><strong>举例</strong>：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> arr = <span class="title class_">Array</span>.<span class="title function_">of</span>(<span class="number">1</span>, <span class="string">&#x27;abc&#x27;</span>, <span class="literal">true</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr); <span class="comment">// 打印结果是数组：[1, &quot;abc&quot;, true]</span></span><br></pre>

<p>补充：<code>new Array()</code>和 <code>Array.of()</code>的区别在于：当参数只有一个时，前者表示数组的长度，后者表示数组中的内容。</p>
<h2 id="数组元素的添加和删除-1"><a href="#数组元素的添加和删除-1" class="headerlink" title="数组元素的添加和删除"></a>数组元素的添加和删除</h2><h3 id="push"><a href="#push" class="headerlink" title="push()"></a>push()</h3><p><code>push()</code>：向数组的<strong>最后面</strong>插入一个或多个元素，返回结果为新数组的<strong>长度</strong>。会改变原数组，因为原数组变成了新数组。</p>
<p>语法：</p>
<pre class="highlight"><span class="line">新数组的长度 = 数组.<span class="title function_">push</span>(元素);</span><br><span class="line">新数组的长度 = 数组.<span class="title function_">push</span>(元素<span class="number">1</span>，元素<span class="number">2</span> ...);</span><br></pre>

<p>代码举例：</p>
<pre class="highlight"><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;王一&#x27;</span>, <span class="string">&#x27;王二&#x27;</span>, <span class="string">&#x27;王三&#x27;</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result1 = arr.<span class="title function_">push</span>(<span class="string">&#x27;王四&#x27;</span>); <span class="comment">// 末尾插入一个元素</span></span><br><span class="line"><span class="keyword">var</span> result2 = arr.<span class="title function_">push</span>(<span class="string">&#x27;王五&#x27;</span>, <span class="string">&#x27;王六&#x27;</span>); <span class="comment">// 末尾插入多个元素</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr)); <span class="comment">// 打印结果：[&quot;王一&quot;,&quot;王二&quot;,&quot;王三&quot;,&quot;王四&quot;,&quot;王五&quot;,&quot;王六&quot;]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result1); <span class="comment">// 打印结果：4</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result2); <span class="comment">// 打印结果：6</span></span><br></pre>

<h3 id="pop"><a href="#pop" class="headerlink" title="pop()"></a>pop()</h3><p><code>pop()</code>：删除数组中的<strong>最后一个</strong>元素，返回结果为<strong>被删除的元素</strong>。</p>
<p>语法：</p>
<pre class="highlight"><span class="line">被删除的元素 = 数组.<span class="title function_">pop</span>();</span><br></pre>

<p>代码举例：</p>
<pre class="highlight"><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;王一&#x27;</span>, <span class="string">&#x27;王二&#x27;</span>, <span class="string">&#x27;王三&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> result1 = arr.<span class="title function_">pop</span>();</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr)); <span class="comment">// 打印结果：[&quot;王一&quot;,&quot;王二&quot;]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result1); <span class="comment">// 打印结果：王三</span></span><br></pre>

<h3 id="unshift"><a href="#unshift" class="headerlink" title="unshift()"></a>unshift()</h3><p><code>unshift()</code>：在数组<strong>最前面</strong>插入一个或多个元素，返回结果为新数组的<strong>长度</strong>。会改变原数组，将原数组变成了新数组。插入元素后，其他元素的索引会依次调整。</p>
<p>语法：</p>
<pre class="highlight"><span class="line">新数组的长度 = 数组.<span class="title function_">unshift</span>(元素);</span><br><span class="line">新数组的长度 = 数组.<span class="title function_">unshift</span>(元素<span class="number">1</span>，元素<span class="number">2.</span>..);</span><br></pre>

<p>代码举例：</p>
<pre class="highlight"><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;王一&#x27;</span>, <span class="string">&#x27;王二&#x27;</span>, <span class="string">&#x27;王三&#x27;</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result1 = arr.<span class="title function_">unshift</span>(<span class="string">&#x27;王四&#x27;</span>); <span class="comment">// 最前面插入一个元素</span></span><br><span class="line"><span class="keyword">var</span> result2 = arr.<span class="title function_">unshift</span>(<span class="string">&#x27;王五&#x27;</span>, <span class="string">&#x27;王六&#x27;</span>); <span class="comment">// 最前面插入多个元素</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr)); <span class="comment">// 打印结果：[&quot;王五&quot;,&quot;王六&quot;,&quot;王四&quot;,&quot;王一&quot;,&quot;王二&quot;,&quot;王三&quot;]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result1); <span class="comment">// 打印结果：4</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result2); <span class="comment">// 打印结果：6</span></span><br></pre>

<h3 id="shift"><a href="#shift" class="headerlink" title="shift()"></a>shift()</h3><p><code>shift()</code>：删除数组中的<strong>第一个</strong>元素，返回结果为<strong>被删除的元素</strong>。</p>
<p>语法：</p>
<pre class="highlight"><span class="line">被删除的元素 = 数组.<span class="title function_">shift</span>();</span><br></pre>

<p>代码举例：</p>
<pre class="highlight"><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;王一&#x27;</span>, <span class="string">&#x27;王二&#x27;</span>, <span class="string">&#x27;王三&#x27;</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result1 = arr.<span class="title function_">shift</span>();</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr)); <span class="comment">// 打印结果：[&quot;王二&quot;,&quot;王三&quot;]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result1); <span class="comment">// 打印结果：王一</span></span><br></pre>



<h3 id="splice"><a href="#splice" class="headerlink" title="splice()"></a>splice()</h3><p><code>splice()</code>：从数组中<strong>删除</strong>指定的一个或多个元素，返回结果为<strong>被删除元素组成的新数组</strong>（会改变原来的数组）。</p>
<p>备注：该方法会改变原数组，会将指定元素从原数组中删除；被删除的元素会封装到一个新的数组中返回。</p>
<p>语法：</p>
<pre class="highlight"><span class="line">新数组 = 原数组.<span class="title function_">splice</span>(起始索引index);</span><br><span class="line"></span><br><span class="line">新数组 = 原数组.<span class="title function_">splice</span>(起始索引index, 需要删除的个数);</span><br><span class="line"></span><br><span class="line">新数组 = 原数组.<span class="title function_">splice</span>(起始索引index, 需要删除的个数, 新的元素<span class="number">1</span>, 新的元素<span class="number">2.</span>..);</span><br></pre>

<p>上方语法中，第三个及之后的参数，表示：删除元素之后，向原数组中添加新的元素，这些元素将会自动插入到起始位置索引的前面。也可以理解成：删除了哪些元素，就在那些元素的所在位置补充新的内容。</p>
<p><code>slice()</code>方法和<code>splice()</code>方法很容易搞混，请一定要注意区分。</p>
<p>举例 1：</p>
<pre class="highlight"><span class="line"><span class="keyword">var</span> arr1 = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;f&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> result1 = arr1.<span class="title function_">splice</span>(<span class="number">1</span>); <span class="comment">//从第index为1的位置开始，删除元素</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr1：&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr1));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result1：&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result1));</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">arr1：[&quot;a&quot;]</span><br><span class="line">result1：[&quot;b&quot;,&quot;c&quot;,&quot;d&quot;,&quot;e&quot;,&quot;f&quot;]</span><br></pre>

<p>举例 2：</p>
<pre class="highlight"><span class="line"><span class="keyword">var</span> arr2 = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;f&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> result2 = arr2.<span class="title function_">splice</span>(-<span class="number">2</span>); <span class="comment">//删除最后两个元素</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr2：&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr2));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result2：&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result2));</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">arr2：[&quot;a&quot;,&quot;b&quot;,&quot;c&quot;,&quot;d&quot;]</span><br><span class="line">result2：[&quot;e&quot;,&quot;f&quot;]</span><br></pre>

<p>举例 3：</p>
<pre class="highlight"><span class="line"><span class="keyword">var</span> arr3 = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;f&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> result3 = arr3.<span class="title function_">splice</span>(<span class="number">1</span>, <span class="number">3</span>); <span class="comment">//从第index为1的位置开始删除元素，一共删除三个元素</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr3：&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr3));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result3：&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result3));</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">arr3：[&quot;a&quot;,&quot;e&quot;,&quot;f&quot;]</span><br><span class="line">result3：[&quot;b&quot;,&quot;c&quot;,&quot;d&quot;]</span><br></pre>

<p>举例4：（删除指定元素，用得很多）</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> arr4 = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;d&#x27;</span>];</span><br><span class="line">arr4.<span class="title function_">splice</span>(arr4.<span class="title function_">indexOf</span>(<span class="string">&#x27;c&#x27;</span>), <span class="number">1</span>); <span class="comment">// 删除数组中的&#x27;c&#x27;这个元素</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr4：&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr4));</span><br></pre>


<p>举例 5：（<strong>第三个参数</strong>的用法）</p>
<pre class="highlight"><span class="line"><span class="keyword">var</span> arr5 = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;f&#x27;</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">//从第index为1的位置开始删除元素,一共删除三个元素。并且在index=1的位置前面追加两个元素&quot;千古壹号&quot;、&quot;vae&quot;（其实就是将index为1的元素改为&quot;千古壹号&quot;，index为2的元素改为&quot;vae&quot;）。</span></span><br><span class="line"><span class="keyword">var</span> result5 = arr5.<span class="title function_">splice</span>(<span class="number">1</span>, <span class="number">3</span>, <span class="string">&#x27;千古壹号&#x27;</span>, <span class="string">&#x27;vae&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr5：&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr5));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result5：&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result5));</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">arr5：[<span class="string">&quot;a&quot;</span>,<span class="string">&quot;千古壹号&quot;</span>,<span class="string">&quot;vae&quot;</span>,<span class="string">&quot;e&quot;</span>,<span class="string">&quot;f&quot;</span>]</span><br><span class="line">result5：[<span class="string">&quot;b&quot;</span>,<span class="string">&quot;c&quot;</span>,<span class="string">&quot;d&quot;</span>]</span><br></pre>

<p>我们再看个类似的例子：</p>
<pre class="highlight"><span class="line"><span class="comment">// 需求：针对数组 [a, b, c, d] 将索引为1的数据修改为e, 索引为2的修改为f</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 写法1：普通写法</span></span><br><span class="line"><span class="keyword">const</span> arr = [a, b, c ,d];</span><br><span class="line">arr[<span class="number">1</span>] = <span class="string">&#x27;e&#x27;</span>;</span><br><span class="line">arr[<span class="number">2</span>] = <span class="string">&#x27;f&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 写法2：通过 splice() 实现</span></span><br><span class="line"><span class="keyword">const</span> arr = [a, b, c ,d];</span><br><span class="line">arr.<span class="title function_">splice</span>(<span class="number">1</span>,<span class="number">2</span>, <span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;f&#x27;</span>);</span><br></pre>

<h3 id="concat"><a href="#concat" class="headerlink" title="concat()"></a>concat()</h3><p><code>concat()</code>：连接两个或多个数组，返回结果为<strong>新的数组</strong>。不会改变原数组。<code>concat()</code>方法的作用是<strong>数组合并</strong>。</p>
<p>语法：</p>
<pre class="highlight"><span class="line">新数组 = 数组<span class="number">1.</span><span class="title function_">concat</span>(数组<span class="number">2</span>, 数组<span class="number">3</span> ...);</span><br></pre>

<p>举例：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> arr1 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">const</span> arr2 = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>];</span><br><span class="line"><span class="keyword">const</span> arr3 = [<span class="string">&#x27;千古壹号&#x27;</span>, <span class="string">&#x27;vae&#x27;</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> result1 = arr1.<span class="title function_">concat</span>(arr2);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> result2 = arr2.<span class="title function_">concat</span>(arr1, arr3);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr1 =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr1));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr2 =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr2));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr3 =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr3));</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result1 =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result1));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result2 =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result2));</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">arr1 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line">arr2 = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>];</span><br><span class="line">arr3 = [<span class="string">&#x27;千古壹号&#x27;</span>, <span class="string">&#x27;vae&#x27;</span>];</span><br><span class="line"></span><br><span class="line">result1 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>];</span><br><span class="line">result2 = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="string">&#x27;千古壹号&#x27;</span>, <span class="string">&#x27;vae&#x27;</span>];</span><br></pre>

<p>从打印结果中可以看到，原数组并没有被修改。</p>
<p><strong>数组合并的另一种方式</strong>：</p>
<p>我们可以使用<code>...</code>这种扩展运算符，将两个数组进行合并。举例如下：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> arr1 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> result = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, ...arr1];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result)); <span class="comment">// 打印结果：[&quot;a&quot;,&quot;b&quot;,&quot;c&quot;,1,2,3]</span></span><br></pre>

<p>备注：数组不能使用加号进行拼接。如果使用加号进行拼接会先转换成字符串再拼接。</p>
<h3 id="slice"><a href="#slice" class="headerlink" title="slice()"></a>slice()</h3><p><code>slice()</code>：从数组中<strong>提取</strong>指定的一个或者多个元素，返回结果为<strong>新的数组</strong>（不会改变原来的数组）。</p>
<p>备注：该方法不会改变原数组，而是将截取到的元素封装到一个新数组中返回。</p>
<p><strong>语法</strong>：</p>
<pre class="highlight"><span class="line">新数组 = 原数组.<span class="title function_">slice</span>(开始位置的索引);</span><br><span class="line"></span><br><span class="line">新数组 = 原数组.<span class="title function_">slice</span>(开始位置的索引, 结束位置的索引);  <span class="comment">//注意：提取的元素中，包含开始位置，不包含结束位置</span></span><br></pre>

<p>举例：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> arr = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;f&#x27;</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> result1 = arr.<span class="title function_">slice</span>(); <span class="comment">// 不加参数时，则获取所有的元素。相当于数组的整体赋值</span></span><br><span class="line"><span class="keyword">const</span> result2 = arr.<span class="title function_">slice</span>(<span class="number">2</span>); <span class="comment">// 从第二个值开始提取，直到末尾</span></span><br><span class="line"><span class="keyword">const</span> result3 = arr.<span class="title function_">slice</span>(-<span class="number">2</span>); <span class="comment">// 提取最后两个元素</span></span><br><span class="line"><span class="keyword">const</span> result4 = arr.<span class="title function_">slice</span>(<span class="number">2</span>, <span class="number">4</span>); <span class="comment">// 提取从第二个到第四个之间的元素（不包括第四个元素）</span></span><br><span class="line"><span class="keyword">const</span> result5 = arr.<span class="title function_">slice</span>(<span class="number">4</span>, <span class="number">2</span>); <span class="comment">// 空</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr:&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result1:&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result1));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result2:&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result2));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result3:&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result3));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result4:&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result4));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result5:&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result5));</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line"><span class="attr">arr</span>: [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;f&#x27;</span>];</span><br><span class="line"><span class="attr">result1</span>: [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;f&#x27;</span>];</span><br><span class="line"><span class="attr">result2</span>: [<span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;f&#x27;</span>];</span><br><span class="line"><span class="attr">result3</span>: [<span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;f&#x27;</span>];</span><br><span class="line"><span class="attr">result4</span>: [<span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;d&#x27;</span>];</span><br><span class="line"><span class="attr">result5</span>: [];</span><br></pre>

<p><strong>补充</strong>：</p>
<p>很多前端开发人员会用 slice()将伪数组，转化为真数组。写法如下：</p>
<pre class="highlight"><span class="line"><span class="comment">// 方式1</span></span><br><span class="line">array = <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(arrayLike);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 方式2</span></span><br><span class="line">array = [].<span class="property">slice</span>.<span class="title function_">call</span>(arrayLike);</span><br></pre>

<p>ES6 看不下去这种蹩脚的转化方法，于是出了一个新的 API：（专门用来将伪数组转化成真数组）</p>
<pre class="highlight"><span class="line">array = <span class="title class_">Array</span>.<span class="title function_">from</span>(arrayLike);</span><br></pre>

<p>关于这个 API 的详细介绍，上面的内容已经讲了，请往前翻。</p>
<h3 id="fill"><a href="#fill" class="headerlink" title="fill()"></a>fill()</h3><p><code>fill()</code>：用一个固定值填充数组，返回结果为<strong>新的数组</strong>。会改变原数组。</p>
<p>语法：</p>
<pre class="highlight"><span class="line"><span class="comment">// 用一个固定值填充数组。数组里的每个元素都会被这个固定值填充</span></span><br><span class="line">新数组 = 数组.<span class="title function_">fill</span>(固定值);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 从 startIndex 开始的数组元素，用固定值填充</span></span><br><span class="line">新数组 = 数组.<span class="title function_">fill</span>(固定值, startIndex);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 从 startIndex 到 endIndex 之间的元素（包左不包右），用固定值填充</span></span><br><span class="line">新数组 = 数组.<span class="title function_">fill</span>(固定值, startIndex, endIndex);</span><br></pre>

<p>举例1：</p>
<pre class="highlight"><span class="line"><span class="comment">// 创建一个长度为4的空数组，然后用 &#x27;f&#x27; 来填充这个空数组</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>(<span class="number">4</span>).<span class="title function_">fill</span>(<span class="string">&#x27;f&#x27;</span>)); <span class="comment">// [&#x27;f&#x27;, &#x27;f&#x27;, &#x27;f,&#x27; &#x27;f&#x27;]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 将现有数组的每一个元素都进行填充</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;d&#x27;</span>].<span class="title function_">fill</span>(<span class="string">&#x27;f&#x27;</span>)); <span class="comment">// [&#x27;f&#x27;, &#x27;f&#x27;, &#x27;f,&#x27; &#x27;f&#x27;]</span></span><br><span class="line"></span><br></pre>

<p>举例2：</p>
<pre class="highlight"><span class="line"><span class="comment">// 指定位置进行填充</span></span><br><span class="line"><span class="keyword">let</span> arr1 = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;d&#x27;</span>];</span><br><span class="line"><span class="keyword">let</span> arr2 = arr1.<span class="title function_">fill</span>(<span class="string">&#x27;f&#x27;</span>, <span class="number">1</span>, <span class="number">3</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr1); <span class="comment">// [&#x27;a&#x27;, &#x27;f&#x27;, &#x27;f,&#x27; &#x27;d&#x27;]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr2); <span class="comment">// [&#x27;a&#x27;, &#x27;f&#x27;, &#x27;f,&#x27; &#x27;d&#x27;]</span></span><br></pre>

<h2 id="reverse"><a href="#reverse" class="headerlink" title="reverse()"></a>reverse()</h2><p><code>reverse()</code>：反转数组，返回结果为<strong>反转后的数组</strong>（会改变原来的数组）。</p>
<p>语法：</p>
<pre class="highlight"><span class="line">反转后的数组 = 数组.<span class="title function_">reverse</span>();</span><br></pre>

<p>举例：</p>
<pre class="highlight"><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;f&#x27;</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result = arr.<span class="title function_">reverse</span>(); <span class="comment">// 将数组 arr 进行反转</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result));</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">arr =[&quot;f&quot;,&quot;e&quot;,&quot;d&quot;,&quot;c&quot;,&quot;b&quot;,&quot;a&quot;]</span><br><span class="line">result =[&quot;f&quot;,&quot;e&quot;,&quot;d&quot;,&quot;c&quot;,&quot;b&quot;,&quot;a&quot;]</span><br></pre>

<p>从打印结果可以看出，原来的数组已经被改变了。</p>
<h2 id="sort"><a href="#sort" class="headerlink" title="sort()"></a>sort()</h2><blockquote>
<p>sort()方法需要好好理解。</p>
</blockquote>
<p><code>sort()</code>：对数组的元素进行从小到大来排序（会改变原来的数组）。</p>
<h3 id="无参时"><a href="#无参时" class="headerlink" title="无参时"></a>无参时</h3><p>如果在使用 sort() 方法时不带参，则默认按照元素的<strong>Unicode 编码</strong>，从小到大进行排序。</p>
<p><strong>举例 1</strong>：（当数组中的元素为字符串时）</p>
<pre class="highlight"><span class="line"><span class="keyword">let</span> arr1 = [<span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;f&#x27;</span>, <span class="string">&#x27;c&#x27;</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> result = arr1.<span class="title function_">sort</span>(); <span class="comment">// 将数组 arr1 进行排序</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr1 =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr1));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result));</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">arr1 =[&quot;a&quot;,&quot;b&quot;,&quot;c&quot;,&quot;d&quot;,&quot;e&quot;,&quot;f&quot;]</span><br><span class="line">result =[&quot;a&quot;,&quot;b&quot;,&quot;c&quot;,&quot;d&quot;,&quot;e&quot;,&quot;f&quot;]</span><br></pre>

<p>从上方的打印结果中，我们可以看到，sort 方法会改变原数组，而且方法的返回值也是同样的结果。</p>
<p><strong>举例 2</strong>：（当数组中的元素为数字时）</p>
<pre class="highlight"><span class="line"><span class="keyword">let</span> arr2 = [<span class="number">5</span>, <span class="number">2</span>, <span class="number">11</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">1</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> result = arr2.<span class="title function_">sort</span>(); <span class="comment">// 将数组 arr2 进行排序</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr2 =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr2));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result));</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">arr2 =[1,11,2,3,4,5]</span><br><span class="line">result =[1,11,2,3,4,5]</span><br></pre>

<p>上方的打印结果中，你会发现，使用 sort() 排序后，数字<code>11</code>竟然在数字<code>2</code>的前面。这是为啥呢？因为上面讲到了，<code>sort()</code>方法是按照<strong>Unicode 编码</strong>进行排序的。</p>
<p>那如果我想让 arr2 里的数字，完全按照从小到大排序，怎么操作呢？继续往下看。</p>
<h3 id="带参时，自定义排序规则"><a href="#带参时，自定义排序规则" class="headerlink" title="带参时，自定义排序规则"></a>带参时，自定义排序规则</h3><p>如果在 sort()方法中带参，我们就可以<strong>自定义</strong>排序规则。具体做法如下：</p>
<p>我们可以在 sort()的参数中添加一个回调函数，来指定排序规则。回调函数中需要定义两个形参，JS将会分别使用数组中的元素作为实参去调用回调函数。</p>
<p>JS根据回调函数的返回值来决定元素的排序：（重要）</p>
<ul>
<li><p>如果返回一个大于 0 的值，则元素会交换位置</p>
</li>
<li><p><strong>如果返回一个小于 0 的值，则不交换位置</strong>。</p>
</li>
<li><p>如果返回一个等于 0 的值，则认为两个元素相等，则不交换位置</p>
</li>
</ul>
<p>如果只是看上面的文字，可能不太好理解，我们来看看下面的例子，你肯定就能明白。</p>
<h3 id="举例：将数组中的数字按照从小到大排序"><a href="#举例：将数组中的数字按照从小到大排序" class="headerlink" title="举例：将数组中的数字按照从小到大排序"></a>举例：将数组中的数字按照从小到大排序</h3><p><strong>写法 1</strong>：</p>
<pre class="highlight"><span class="line"><span class="keyword">var</span> arr = [<span class="number">5</span>, <span class="number">2</span>, <span class="number">11</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">1</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 自定义排序规则</span></span><br><span class="line"><span class="keyword">var</span> result = arr.<span class="title function_">sort</span>(<span class="keyword">function</span> (<span class="params">a, b</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (a &gt; b) &#123;</span><br><span class="line">        <span class="comment">// 如果 a 大于 b，则交换 a 和 b 的位置</span></span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (a &lt; b) &#123;</span><br><span class="line">        <span class="comment">// 如果 a 小于 b，则位置不变</span></span><br><span class="line">        <span class="keyword">return</span> -<span class="number">1</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 如果 a 等于 b，则位置不变</span></span><br><span class="line">        <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result));</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">11</span>];</span><br><span class="line">result = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">11</span>];</span><br></pre>

<p>上方代码的写法太啰嗦了，其实也可以简化为如下写法：</p>
<p><strong>写法 2</strong>：（ES5写法）</p>
<pre class="highlight"><span class="line"><span class="keyword">var</span> arr = [<span class="number">5</span>, <span class="number">2</span>, <span class="number">11</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">1</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 自定义排序规则</span></span><br><span class="line"><span class="keyword">var</span> result = arr.<span class="title function_">sort</span>(<span class="keyword">function</span> (<span class="params">a, b</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> a - b; <span class="comment">// 升序排列</span></span><br><span class="line">    <span class="comment">// return b - a; // 降序排列</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result));</span><br></pre>

<p>打印结果不变。</p>
<p>上方代码还可以写成 ES6 的形式，也就是将 function 改为箭头函数，其写法如下。</p>
<p><strong>写法 3</strong>：（ES6写法，箭头函数）</p>
<pre class="highlight"><span class="line"><span class="keyword">let</span> arr = [<span class="number">5</span>, <span class="number">2</span>, <span class="number">11</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">1</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 自定义排序规则</span></span><br><span class="line"><span class="keyword">let</span> result = arr.<span class="title function_">sort</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> a - b; <span class="comment">// 升序排列</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result));</span><br></pre>

<p>上方代码，因为函数体内只有一句话，所以可以去掉 return 语句，继续简化为如下写法。</p>
<p><strong>写法 4</strong>：（推荐写法）</p>
<pre class="highlight"><span class="line"><span class="keyword">let</span> arr = [<span class="number">5</span>, <span class="number">2</span>, <span class="number">11</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">1</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 自定义排序规则：升序排列</span></span><br><span class="line"><span class="keyword">let</span> result = arr.<span class="title function_">sort</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> a - b);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;result =&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(result));</span><br></pre>

<p>上面的各种写法中，写法 4 是我们在实战开发中用得最多的。</p>
<p>为了确保代码的简洁优雅，接下来的讲解中，凡是涉及到函数，我们将尽量采用 ES6 中的箭头函数来写。</p>
<h3 id="举例：将数组从小到大排序"><a href="#举例：将数组从小到大排序" class="headerlink" title="举例：将数组从小到大排序"></a>举例：将数组从小到大排序</h3><p>将数组从小到大排序，这个例子很常见。但在实际开发中，总会有一些花样。</p>
<p>下面这段代码，在实际开发中，经常用到，一定要掌握。完整代码如下：</p>
<pre class="highlight"><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">let</span> dataList = [</span></span><br><span class="line"><span class="language-javascript">                &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">title</span>: <span class="string">&#x27;品牌鞋子，高品质低价入手&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">publishTime</span>: <span class="number">200</span>,</span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">title</span>: <span class="string">&#x27;不是很贵，但是很暖&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">publishTime</span>: <span class="number">100</span>,</span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">title</span>: <span class="string">&#x27;无法拒绝的美食，跟我一起吃&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">publishTime</span>: <span class="number">300</span>,</span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">            ];</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;qianguyihao 排序前的数组：&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(dataList));</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 将dataList 数组，按照 publishTime 字段，从小到大排序。（会改变原数组）</span></span></span><br><span class="line"><span class="language-javascript">            dataList.<span class="title function_">sort</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> <span class="built_in">parseInt</span>(a.<span class="property">publishTime</span>) - <span class="built_in">parseInt</span>(b.<span class="property">publishTime</span>));</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;qianguyihao 排序后的数组：&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(dataList));</span></span><br><span class="line"><span class="language-javascript">        </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">qianguyihao 排序前的数组：[</span><br><span class="line">    &#123;&quot;title&quot;:&quot;品牌鞋子，高品质低价入手&quot;,&quot;publishTime&quot;:200&#125;,</span><br><span class="line">    &#123;&quot;title&quot;:&quot;不是很贵，但是很暖&quot;,&quot;publishTime&quot;:100&#125;,</span><br><span class="line">    &#123;&quot;title&quot;:&quot;无法拒绝的美食，跟我一起吃&quot;,&quot;publishTime&quot;:300&#125;</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line">qianguyihao 排序后的数组：[</span><br><span class="line">    &#123;&quot;title&quot;:&quot;不是很贵，但是很暖&quot;,&quot;publishTime&quot;:100&#125;,</span><br><span class="line">    &#123;&quot;title&quot;:&quot;品牌鞋子，高品质低价入手&quot;,&quot;publishTime&quot;:200&#125;,</span><br><span class="line">    &#123;&quot;title&quot;:&quot;无法拒绝的美食，跟我一起吃&quot;,&quot;publishTime&quot;:300&#125;</span><br><span class="line">]</span><br></pre>

<p>上方代码中，肯定有人会问： publishTime 字段已经是 int 类型了，为啥在排序前还要做一次 parseInt() 转换？这是因为，这种数据，一般是后台接口返回给前端的，数据可能是 int 类型、也可能是字符串类型，所以前端还是统一先做一下 partInt() 比较保险。这是一种良好的工作习惯和风险意识。</p>
<h2 id="indexOf-和-lastIndexOf-：获取元素的索引"><a href="#indexOf-和-lastIndexOf-：获取元素的索引" class="headerlink" title="indexOf() 和 lastIndexOf()：获取元素的索引"></a>indexOf() 和 lastIndexOf()：获取元素的索引</h2><p><strong>语法 1</strong>：</p>
<pre class="highlight"><span class="line">元素的索引 = 数组.<span class="title function_">indexOf</span>(想要查询的元素);</span><br><span class="line"></span><br><span class="line">元素的索引 = 数组.<span class="title function_">lastIndexOf</span>(想要查询的元素);</span><br></pre>

<p>备注：<code>indexOf()</code> 是从左往右查找元素的位置。同理，<code>lastIndexOf()</code>是从右往左寻找。</p>
<p><strong>解释</strong>：可以检索一个数组中是否含有指定的元素。如果数组中含有该元素，则会返回其<strong>第一次出现</strong>的索引，并立即停止查找；如果没有找到指定的内容，则返回 -1。</p>
<p>这个方法的作用：</p>
<ul>
<li><p>如果找到了指定的元素，就返回元素对应的位置。</p>
</li>
<li><p>如果没有找到指定的元素，就会返回-1。</p>
</li>
</ul>
<p><strong>注意</strong>：<code>indexOf()</code>在检索时，是严格类型约束，类似于<code>===</code>。</p>
<p><strong>举例</strong> ：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> arr = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;c&#x27;</span>];</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">indexOf</span>(<span class="string">&#x27;c&#x27;</span>)); <span class="comment">//从前往后，找第一个&quot;c&quot;在哪个位置</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">lastIndexOf</span>(<span class="string">&#x27;d&#x27;</span>)); <span class="comment">//从后往前，找第一个&quot;d&quot;在哪个位置</span></span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">2</span><br><span class="line">5</span><br></pre>

<p><strong>举例</strong>：</p>
<pre class="highlight"><span class="line"><span class="keyword">let</span> arr = [<span class="string">&#x27;1&#x27;</span>, <span class="string">&#x27;2&#x27;</span>, <span class="string">&#x27;3&#x27;</span>, <span class="string">&#x27;4&#x27;</span>, <span class="string">&#x27;5&#x27;</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">indexOf</span>(<span class="number">2</span>));</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">-1</span><br></pre>

<p><strong>语法 2</strong>：</p>
<p>这个方法还可以指定第二个参数，用来指定查找的<strong>起始位置</strong>。语法如下：</p>
<pre class="highlight"><span class="line">索引值 = 数组.<span class="title function_">indexOf</span>(想要查找的元素, [查找的起始位置]);</span><br></pre>

<p>这个方法的第二个参数非常巧妙，数据结构与算法的面试题中，时常出现。</p>
<p>举例：（两个参数时，需要特别注意）</p>
<pre class="highlight"><span class="line"><span class="keyword">let</span> arr = [<span class="string">&#x27;q&#x27;</span>, <span class="string">&#x27;i&#x27;</span>, <span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;n&#x27;</span>, <span class="string">&#x27;g&#x27;</span>, <span class="string">&#x27;u&#x27;</span>, <span class="string">&#x27;y&#x27;</span>, <span class="string">&#x27;i&#x27;</span>, <span class="string">&#x27;h&#x27;</span>, <span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;o&#x27;</span>];</span><br><span class="line">result = str.<span class="title function_">indexOf</span>(<span class="string">&#x27;a&#x27;</span>, <span class="number">3</span>); <span class="comment">// 从下标为3的位置开始查找 &#x27;a&#x27;这个元素 【重要】</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">// 打印结果：9</span></span><br></pre>

<p>上方代码中，<code>indexOf()</code>方法中携带了两个参数，具体解释请看注释。</p>
<h2 id="includes"><a href="#includes" class="headerlink" title="includes()"></a>includes()</h2><p><strong>语法</strong>：</p>
<pre class="highlight"><span class="line">布尔值 = arr.<span class="title function_">includes</span>(想要查找的元素, [position]);</span><br></pre>

<p><strong>解释</strong>：判断一个数组中是否包含指定的元素。如果是，则会返回 true；否则返回 false。</p>
<p>参数中的 <code>position</code>：如果不指定，则默认为0；如果指定，则规定了检索的起始位置。</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> arr = [<span class="number">11</span>, <span class="number">12</span>, <span class="number">13</span>, <span class="number">14</span>, <span class="number">15</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">includes</span>(<span class="number">12</span>)); <span class="comment">// 打印结果：true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">includes</span>(<span class="number">20</span>)); <span class="comment">// 打印结果：false</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">includes</span>(<span class="number">11</span>, <span class="number">1</span>)); <span class="comment">// 打印结果：false</span></span><br></pre>

<h2 id="find-和findIndex"><a href="#find-和findIndex" class="headerlink" title="find()和findIndex()"></a>find()和findIndex()</h2><h3 id="find"><a href="#find" class="headerlink" title="find()"></a>find()</h3><p><strong>语法</strong>：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> itemResult = arr.<span class="title function_">find</span>(<span class="function">(<span class="params">currentItem, currentIndex, currentArray</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">&#125;);</span><br></pre>

<p><strong>作用</strong>：找出<strong>第一个</strong>满足「指定条件返回 true」的元素，并立即停止查找；如果没找到，则返回 undefined。</p>
<p>备注：一旦找到符合条件的第一个元素，将不再继续往下遍历。</p>
<p>举例：</p>
<pre class="highlight"><span class="line"><span class="keyword">let</span> arr = [<span class="number">2</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">5</span>, <span class="number">7</span>, <span class="number">6</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> result = arr.<span class="title function_">find</span>(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> item &gt; <span class="number">4</span>; <span class="comment">//遍历数组arr，一旦发现有第一个元素大于4，就把这个元素返回</span></span><br><span class="line">  	<span class="comment">// 上面这行代码是简写方式；完整写法也可以这样写：ccif (item &gt; 4) &#123;return true&#125;</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">//打印结果：5</span></span><br></pre>

<h3 id="findIndex"><a href="#findIndex" class="headerlink" title="findIndex()"></a>findIndex()</h3><p><strong>语法</strong>：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> indexResult = arr.<span class="title function_">findIndex</span>(<span class="function">(<span class="params">currentItem, currentIndex, currentArray</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">&#125;);</span><br></pre>

<p><strong>作用</strong>：找出<strong>第一个</strong>满足「指定条件返回 true」的元素的索引，并立即停止遍历；如果没找到，则返回 -1。</p>
<p>举例：</p>
<blockquote>
<p>我们直接把上面find 方法的代码示例改成 findIndex，看看效果。</p>
</blockquote>
<pre class="highlight"><span class="line"><span class="keyword">let</span> arr = [<span class="number">2</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">5</span>, <span class="number">7</span>, <span class="number">6</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> result = arr.<span class="title function_">findIndex</span>(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> item &gt; <span class="number">4</span>; <span class="comment">//遍历数组arr，一旦发现有第一个元素大于4，就把这个元素的index返回</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">//打印结果：3</span></span><br></pre>

<h2 id="every-和some"><a href="#every-和some" class="headerlink" title="every()和some()"></a>every()和some()</h2><h3 id="every"><a href="#every" class="headerlink" title="every()"></a>every()</h3><p><strong>语法</strong>：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> boolResult = arr.<span class="title function_">every</span>(<span class="function">(<span class="params">currentItem, currentIndex, currentArray</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">&#125;);</span><br></pre>



<p><code>every()</code>：对数组中每一项运行回调函数，如果都返回 true，every 就返回 true；如果有一项返回 false，则停止遍历，此方法返回 false。</p>
<p>注意：every()方法的返回值是 boolean 值，参数是回调函数。</p>
<p>举例：</p>
<pre class="highlight"><span class="line"><span class="keyword">var</span> arr1 = [<span class="string">&#x27;千古&#x27;</span>, <span class="string">&#x27;宿敌&#x27;</span>, <span class="string">&#x27;南山忆&#x27;</span>, <span class="string">&#x27;素颜&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> bool1 = arr1.<span class="title function_">every</span>(<span class="keyword">function</span> (<span class="params">item, index, array</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (item.<span class="property">length</span> &gt; <span class="number">2</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(bool1); <span class="comment">//输出结果：false。只要有一个元素的长度是超过两个字符的，就返回false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr2 = [<span class="string">&#x27;千古&#x27;</span>, <span class="string">&#x27;宿敌&#x27;</span>, <span class="string">&#x27;南山&#x27;</span>, <span class="string">&#x27;素颜&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> bool2 = arr2.<span class="title function_">every</span>(<span class="keyword">function</span> (<span class="params">item, index, array</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (item.<span class="property">length</span> &gt; <span class="number">2</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(bool2); <span class="comment">//输出结果：true。因为每个元素的长度都是两个字符。</span></span><br></pre>

<h3 id="some"><a href="#some" class="headerlink" title="some()"></a>some()</h3><p><code>some()</code>：对数组中每一个元素运行回调函数，只要有一个元素返回 true，则停止遍历，此方法返回 true。</p>
<p>注意：some()方法的返回值是 boolean 值。</p>
<h3 id="every-和-some-的使用场景"><a href="#every-和-some-的使用场景" class="headerlink" title="every() 和 some() 的使用场景"></a>every() 和 some() 的使用场景</h3><p>every() 和 some() 这两个方法，初学者很容易搞混。要怎么区分呢？你可以这样记：</p>
<ul>
<li><p>every()：全部真，才为真。当你需要让数组中的每一个元素都满足指定条件时，那就使用 every()。</p>
</li>
<li><p>some()：一个真，则为真，点到为止。数组中只要有一个元素满足指定条件时，就停止遍历。那就使用 some()。</p>
</li>
</ul>
<h2 id="valueOf-：返回数组本身"><a href="#valueOf-：返回数组本身" class="headerlink" title="valueOf()：返回数组本身"></a>valueOf()：返回数组本身</h2><pre class="highlight"><span class="line">数组本身 = 数组.<span class="title function_">valueOf</span>();</span><br></pre>

<p>这个方法的意义不大。因为我们直接写数组对象的名字，就已经是数组本身了。</p>
<h2 id="遍历数组-1"><a href="#遍历数组-1" class="headerlink" title="遍历数组"></a>遍历数组</h2><h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><p><strong>遍历数组</strong>：获取并操作数组中的每一个元素，然后得到想要的返回结果。在实战开发中使用得非常频繁。</p>
<p>语法：</p>
<pre class="highlight"><span class="line"><span class="comment">// ES5语法</span></span><br><span class="line">数组/boolean/无 = 数组.<span class="property">forEach</span>/map/<span class="title function_">filter</span>(<span class="keyword">function</span> (<span class="params">item, index, arr</span>) &#123;</span><br><span class="line">   相关代码和返回值；</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// ES6语法</span></span><br><span class="line">数组/boolean/无 = 数组.<span class="property">forEach</span>/map/<span class="title function_">filter</span>(<span class="function">(<span class="params">item, index, arr</span>) =&gt;</span> &#123;</span><br><span class="line">   相关代码和返回值；</span><br><span class="line">&#125;)</span><br></pre>

<p>有了上面这些方法（其实远不止这几个），就可以替代 for 循环了。</p>
<p>我们先来看看传统的for循环，然后依次介绍其他方法。</p>
<h3 id="for-循环遍历"><a href="#for-循环遍历" class="headerlink" title="for 循环遍历"></a>for 循环遍历</h3><p>举例：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> arr = [<span class="string">&#x27;千古壹号&#x27;</span>, <span class="string">&#x27;许嵩&#x27;</span>, <span class="string">&#x27;vae&#x27;</span>];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(arr[i]); <span class="comment">// arr[i]代表的是数组中的每一个元素i</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr));</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">千古壹号</span><br><span class="line">许嵩</span><br><span class="line">vae</span><br><span class="line"></span><br><span class="line">[&quot;千古壹号&quot;,&quot;许嵩&quot;,&quot;vae&quot;]</span><br></pre>

<h2 id="forEach"><a href="#forEach" class="headerlink" title="forEach()"></a>forEach()</h2><blockquote>
<p><code>forEach()</code> 这种遍历方法只支持 IE8 以上的浏览器。IE8 及以下的浏览器均不支持该方法。所以如果需要兼容 IE8，则不要使用 forEach，改为使用 for 循环来遍历即可。</p>
</blockquote>
<h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><pre class="highlight"><span class="line"><span class="comment">// ES5语法</span></span><br><span class="line">arr.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">currentItem, currentIndex, currentArray</span>) &#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(currentValue);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// ES6语法</span></span><br><span class="line">arr.<span class="title function_">forEach</span>(<span class="function">(<span class="params">currentItem, currentIndex, currentArray</span>) =&gt;</span> &#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(currentValue);</span><br><span class="line">&#125;);</span><br></pre>

<p>forEach()方法需要一个函数作为参数。这种函数，是由我们创建但是不由我们调用的，我们称为回调函数。</p>
<p>数组中有几个元素，该回调函数就会执行几次。</p>
<p>回调函数中传递三个参数：</p>
<ul>
<li><p>参数1：当前正在遍历的元素</p>
</li>
<li><p>参数2：当前正在遍历的元素的索引</p>
</li>
<li><p>参数3：正在遍历的数组</p>
</li>
</ul>
<p>注意，forEach() 没有返回值。也可以理解成：forEach() 的返回值是 undefined。如果你尝试 <code>newArray = currentArray.forEach()</code>这种方式来接收，是达不到效果的。</p>
<p>代码举例：</p>
<pre class="highlight"><span class="line"><span class="keyword">let</span> myArr = [<span class="string">&#x27;王一&#x27;</span>, <span class="string">&#x27;王二&#x27;</span>, <span class="string">&#x27;王三&#x27;</span>];</span><br><span class="line"></span><br><span class="line">myArr.<span class="title function_">forEach</span>(<span class="function">(<span class="params">currentItem, currentIndex, currentArray</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;item:&#x27;</span> + currentItem);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;index:&#x27;</span> + currentIndex);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr:&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(currentArray));</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;----------&#x27;</span>);</span><br><span class="line">&#125;);</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line"><span class="attr">item</span>:王一</span><br><span class="line"><span class="attr">index</span>:<span class="number">0</span></span><br><span class="line"><span class="attr">arr</span>:[<span class="string">&quot;王一&quot;</span>,<span class="string">&quot;王二&quot;</span>,<span class="string">&quot;王三&quot;</span>]</span><br><span class="line">----------</span><br><span class="line"><span class="attr">item</span>:王二</span><br><span class="line"><span class="attr">index</span>:<span class="number">1</span></span><br><span class="line"><span class="attr">arr</span>:[<span class="string">&quot;王一&quot;</span>,<span class="string">&quot;王二&quot;</span>,<span class="string">&quot;王三&quot;</span>]</span><br><span class="line">----------</span><br><span class="line"><span class="attr">item</span>:王三</span><br><span class="line"><span class="attr">index</span>:<span class="number">2</span></span><br><span class="line"><span class="attr">arr</span>:[<span class="string">&quot;王一&quot;</span>,<span class="string">&quot;王二&quot;</span>,<span class="string">&quot;王三&quot;</span>]</span><br><span class="line">----------</span><br></pre>

<h3 id="forEach-会不会改变原数组？"><a href="#forEach-会不会改变原数组？" class="headerlink" title="forEach() 会不会改变原数组？"></a>forEach() 会不会改变原数组？</h3><p>forEach() 会不会改变原数组？关于这个问题，大部分人会搞错。我们来看看下面的代码。</p>
<p><strong>1、数组的元素是基本数据类型</strong>：（无法改变原数组）</p>
<pre class="highlight"><span class="line"><span class="keyword">let</span> numArr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"></span><br><span class="line">numArr.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span><br><span class="line">    item = item * <span class="number">2</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(numArr)); <span class="comment">// 打印结果：[1, 2, 3]</span></span><br></pre>

<p>上面这段代码，你可要看仔细了，打印结果是 <code>[1, 2, 3]</code>，不是 <code>[2, 4, 6]</code>。</p>
<p><strong>2、数组的元素是引用数据类型</strong>：（直接修改整个元素对象时，无法改变原数组）</p>
<pre class="highlight"><span class="line"><span class="keyword">let</span> objArr = [</span><br><span class="line">    &#123; <span class="attr">name</span>: <span class="string">&#x27;千古壹号&#x27;</span>, <span class="attr">age</span>: <span class="number">20</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">name</span>: <span class="string">&#x27;许嵩&#x27;</span>, <span class="attr">age</span>: <span class="number">30</span> &#125;,</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line">objArr.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span><br><span class="line">    item = &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&#x27;邓紫棋&#x27;</span>,</span><br><span class="line">        <span class="attr">age</span>: <span class="string">&#x27;29&#x27;</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(objArr)); <span class="comment">// 打印结果：[&#123;&quot;name&quot;:&quot;千古壹号&quot;,&quot;age&quot;:20&#125;,&#123;&quot;name&quot;:&quot;许嵩&quot;,&quot;age&quot;:30&#125;]</span></span><br></pre>

<p><strong>3、数组的元素是引用数据类型</strong>：（修改元素对象里的某个属性时，可以改变原数组）</p>
<pre class="highlight"><span class="line"><span class="keyword">let</span> objArr = [</span><br><span class="line">    &#123; <span class="attr">name</span>: <span class="string">&#x27;千古壹号&#x27;</span>, <span class="attr">age</span>: <span class="number">28</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">name</span>: <span class="string">&#x27;许嵩&#x27;</span>, <span class="attr">age</span>: <span class="number">30</span> &#125;,</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line">objArr.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span><br><span class="line">    item.<span class="property">name</span> = <span class="string">&#x27;邓紫棋&#x27;</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(objArr)); <span class="comment">// 打印结果：[&#123;&quot;name&quot;:&quot;邓紫棋&quot;,&quot;age&quot;:28&#125;,&#123;&quot;name&quot;:&quot;邓紫棋&quot;,&quot;age&quot;:30&#125;]</span></span><br></pre>

<p>如果你需要通过 forEach 修改原数组，建议用 forEach 里面的参数 2 和参数 3 来做，具体请看下面的标准做法。</p>
<p><strong>4、forEach() 通过参数 2、参数 3 修改原数组</strong>：（标准做法，一定要看）</p>
<pre class="highlight"><span class="line"><span class="comment">// 1、数组的元素是基本数据类型</span></span><br><span class="line"><span class="keyword">let</span> numArr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"></span><br><span class="line">numArr.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item, index, arr</span>) =&gt;</span> &#123;</span><br><span class="line">    arr[index] = arr[index] * <span class="number">2</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(numArr)); <span class="comment">// 打印结果：[2,4,6]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、数组的元素是引用数据类型时，直接修改对象</span></span><br><span class="line"><span class="keyword">let</span> objArr = [</span><br><span class="line">    &#123; <span class="attr">name</span>: <span class="string">&#x27;千古壹号&#x27;</span>, <span class="attr">age</span>: <span class="number">28</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">name</span>: <span class="string">&#x27;许嵩&#x27;</span>, <span class="attr">age</span>: <span class="number">34</span> &#125;,</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line">objArr.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item, index, arr</span>) =&gt;</span> &#123;</span><br><span class="line">    arr[index] = &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&#x27;小明&#x27;</span>,</span><br><span class="line">        <span class="attr">age</span>: <span class="string">&#x27;10&#x27;</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(objArr)); <span class="comment">// 打印结果：[&#123;&quot;name&quot;:&quot;小明&quot;,&quot;age&quot;:&quot;10&quot;&#125;,&#123;&quot;name&quot;:&quot;小明&quot;,&quot;age&quot;:&quot;10&quot;&#125;]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3、数组的元素是引用数据类型时，修改对象的某个属性</span></span><br><span class="line"><span class="keyword">let</span> objArr2 = [</span><br><span class="line">    &#123; <span class="attr">name</span>: <span class="string">&#x27;千古壹号&#x27;</span>, <span class="attr">age</span>: <span class="number">28</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">name</span>: <span class="string">&#x27;许嵩&#x27;</span>, <span class="attr">age</span>: <span class="number">34</span> &#125;,</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line">objArr2.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item, index, arr</span>) =&gt;</span> &#123;</span><br><span class="line">    arr[index].<span class="property">name</span> = <span class="string">&#x27;小明&#x27;</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(objArr2)); <span class="comment">// 打印结果：[&#123;&quot;name&quot;:&quot;小明&quot;,&quot;age&quot;:28&#125;,&#123;&quot;name&quot;:&quot;小明&quot;,&quot;age&quot;:34&#125;]</span></span><br></pre>

<p><strong>总结</strong>：</p>
<p>如果纯粹只是遍历数组，那么，可以用 forEach() 方法。但是，如果你想在遍历数组的同时，去改变数组里的元素内容，那么，最好是用 map() 方法来做，不要用 forEach()方法，避免出现一些低级错误。</p>
<p>参考链接：</p>
<ul>
<li><p><a target="_blank" rel="noopener" href="https://juejin.im/post/5d526a4ae51d4557dc774e7d">forEach 到底可以改变原数组吗？</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://lhajh.github.io/js/2018/05/26/Does-forEach-change-the-original-array-value.html">forEach 会改变原数组值吗</a></p>
</li>
</ul>
<h2 id="for-of"><a href="#for-of" class="headerlink" title="for of"></a>for of</h2><p>ES6语法推出了 for of，可用于循环遍历数组。</p>
<h3 id="语法-1"><a href="#语法-1" class="headerlink" title="语法"></a>语法</h3><pre class="highlight"><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> value <span class="keyword">of</span> arr) &#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(value);</span><br><span class="line">&#125;</span><br></pre>

<h3 id="不要使用-for-in-遍历数组"><a href="#不要使用-for-in-遍历数组" class="headerlink" title="不要使用 for in 遍历数组"></a>不要使用 for in 遍历数组</h3><p>for in 是专门用于遍历对象的。对象的属性是无序的（而数组的元素有顺序），for in循环就是专门用于遍历无序的对象。所以，不要用 for in 遍历数组。</p>
<p>for in语法：</p>
<pre class="highlight"><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> obj) &#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(key);</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">key</span>);</span><br><span class="line">&#125;</span><br></pre>



<h2 id="map"><a href="#map" class="headerlink" title="map()"></a>map()</h2><h3 id="语法-2"><a href="#语法-2" class="headerlink" title="语法"></a>语法</h3><pre class="highlight"><span class="line"><span class="comment">// ES5语法</span></span><br><span class="line"><span class="keyword">const</span> newArr =  arr.<span class="title function_">map</span>(<span class="keyword">function</span> (<span class="params">currentItem, currentIndex, currentArray</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> newItem;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// ES6语法</span></span><br><span class="line"><span class="keyword">const</span> newArr = arr.<span class="title function_">map</span>(<span class="function">(<span class="params">currentItem, currentIndex, currentArray</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> newItem;</span><br><span class="line">&#125;);</span><br></pre>

<p>解释：对数组中每一项运行回调函数，返回该函数的结果，组成的新数组（返回的是<strong>加工后</strong>的新数组）。不会改变原数组。</p>
<p>作用：对数组中的每一项进行加工。</p>
<p><strong>举例 1</strong>：（拷贝的过程中改变数组元素的值）</p>
<p>有一个已知的数组 arr1，我要求让 arr1 中的每个元素的值都加 10，这里就可以用到 map 方法。代码举例：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> arr1 = [<span class="number">1</span>, <span class="number">3</span>, <span class="number">6</span>, <span class="number">2</span>, <span class="number">5</span>, <span class="number">6</span>];</span><br><span class="line"><span class="keyword">const</span> arr2 = arr1.<span class="title function_">map</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> item + <span class="number">10</span>; <span class="comment">//让arr1中的每个元素加10</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr2); <span class="comment">// 数组 arr2 的值：[11, 13, 16, 12, 15, 16]</span></span><br></pre>

<p><strong>举例 2</strong>：【重要案例，实际开发中经常用到】</p>
<p>将 A 数组中某个属性的值，存储到 B 数组中。代码举例：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> arr1 = [</span><br><span class="line">    &#123; <span class="attr">name</span>: <span class="string">&#x27;千古壹号&#x27;</span>, <span class="attr">age</span>: <span class="string">&#x27;28&#x27;</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">name</span>: <span class="string">&#x27;许嵩&#x27;</span>, <span class="attr">age</span>: <span class="string">&#x27;32&#x27;</span> &#125;,</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 将数组 arr1 中的 name 属性，存储到 数组 arr2 中</span></span><br><span class="line"><span class="keyword">const</span> arr2 = arr1.<span class="title function_">map</span>(<span class="function"><span class="params">item</span> =&gt;</span> item.<span class="property">name</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 将数组 arr1 中的 name、age这两个属性，改一下“键”的名字，存储到 arr3中</span></span><br><span class="line"><span class="keyword">const</span> arr3 = arr1.<span class="title function_">map</span>(<span class="function"><span class="params">item</span> =&gt;</span> (&#123;</span><br><span class="line">    <span class="attr">myName</span>: item.<span class="property">name</span>,</span><br><span class="line">    <span class="attr">myAge</span>: item.<span class="property">age</span>,</span><br><span class="line">&#125;)); <span class="comment">// 将数组 arr1 中的 name 属性，存储到 数组 arr2 中</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr1:&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr1));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr2:&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr2));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;arr3:&#x27;</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr3));</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">arr1:[&#123;&quot;name&quot;:&quot;千古壹号&quot;,&quot;age&quot;:&quot;28&quot;&#125;,&#123;&quot;name&quot;:&quot;许嵩&quot;,&quot;age&quot;:&quot;32&quot;&#125;]</span><br><span class="line"></span><br><span class="line">arr2:[&quot;千古壹号&quot;,&quot;许嵩&quot;]</span><br><span class="line"></span><br><span class="line">arr3:[&#123;&quot;myName&quot;:&quot;千古壹号&quot;,&quot;myAge&quot;:&quot;28&quot;&#125;,&#123;&quot;myName&quot;:&quot;许嵩&quot;,&quot;myAge&quot;:&quot;32&quot;&#125;]</span><br><span class="line"></span><br></pre>

<p>map 的应用场景，主要就是以上两种。</p>
<h3 id="map-方法会不会改变原数组？"><a href="#map-方法会不会改变原数组？" class="headerlink" title="map() 方法会不会改变原数组？"></a>map() 方法会不会改变原数组？</h3><p>答案：不一定。</p>
<p>举例：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> arr = [</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;qianguyihao1&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">22</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;qianguyihao2&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">23</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line">arr.<span class="title function_">map</span>(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span><br><span class="line">  item.<span class="property">name</span> = <span class="string">&quot;haha&quot;</span>; <span class="comment">// 修改 item 里的某个属性</span></span><br><span class="line">  <span class="keyword">return</span> item;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr));</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">[&#123;&quot;name&quot;:&quot;haha&quot;,&quot;age&quot;:22&#125;,&#123;&quot;name&quot;:&quot;haha&quot;,&quot;age&quot;:23&#125;]</span><br></pre>

<p>总结：map方法如果是修改整个item的值，则不会改变原数组。但如果是修改 item 里面的某个属性，那就会改变原数组。</p>
<h2 id="filter"><a href="#filter" class="headerlink" title="filter()"></a>filter()</h2><p>语法：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> newArr = arr.<span class="title function_">filter</span>(<span class="function">(<span class="params">currentItem, currentIndex, currentArray</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">&#125;);</span><br></pre>

<p>解释：对数组中的<strong>每一项</strong>运行回调函数，该函数返回结果是 true 的项，将组成新的数组（返回值就是这个新数组）。不会改变原数组。</p>
<p>作用：对数组进行过滤。</p>
<p><strong>举例 1</strong>：找出数组 arr1 中大于 4 的元素，返回一个新的数组。代码如下：</p>
<pre class="highlight"><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">1</span>, <span class="number">3</span>, <span class="number">6</span>, <span class="number">2</span>, <span class="number">5</span>, <span class="number">6</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr2 = arr1.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (item &gt; <span class="number">4</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">true</span>; <span class="comment">// 将arr1中大于4的元素返回，组成新的数组</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr1)); <span class="comment">// 打印结果：[1,3,6,2,5,6]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr2)); <span class="comment">// 打印结果：[6,5,6]</span></span><br></pre>

<p>上方代码更简洁的写法如下：</p>
<pre class="highlight"><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">1</span>, <span class="number">3</span>, <span class="number">6</span>, <span class="number">2</span>, <span class="number">5</span>, <span class="number">6</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr2 = arr1.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> item &gt; <span class="number">4</span>); <span class="comment">// 将arr1中大于4的元素返回，组成新的数组</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr1)); <span class="comment">// 打印结果：[1,3,6,2,5,6]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr2)); <span class="comment">// 打印结果：[6,5,6]</span></span><br></pre>

<p><strong>举例 2</strong>：</p>
<p>获取对象数组 arr1 中指定类型的对象，放到数组 arr2 中。代码举例如下：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> arr1 = [</span><br><span class="line">    &#123; <span class="attr">name</span>: <span class="string">&#x27;许嵩&#x27;</span>, <span class="attr">type</span>: <span class="string">&#x27;一线&#x27;</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">name</span>: <span class="string">&#x27;周杰伦&#x27;</span>, <span class="attr">type</span>: <span class="string">&#x27;退居二线&#x27;</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">name</span>: <span class="string">&#x27;邓紫棋&#x27;</span>, <span class="attr">type</span>: <span class="string">&#x27;一线&#x27;</span> &#125;,</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr2 = arr1.<span class="title function_">filter</span>(<span class="function">(<span class="params">item</span>) =&gt;</span> item.<span class="property">type</span> == <span class="string">&#x27;一线&#x27;</span>); <span class="comment">// 筛选出一线歌手</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(arr2));</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">[</span><br><span class="line">    &#123; <span class="attr">name</span>: <span class="string">&#x27;许嵩&#x27;</span>, <span class="attr">type</span>: <span class="string">&#x27;一线&#x27;</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">name</span>: <span class="string">&#x27;邓紫棋&#x27;</span>, <span class="attr">type</span>: <span class="string">&#x27;一线&#x27;</span> &#125;,</span><br><span class="line">];</span><br></pre>

<h2 id="reduce"><a href="#reduce" class="headerlink" title="reduce()"></a>reduce()</h2><h3 id="reduce-语法"><a href="#reduce-语法" class="headerlink" title="reduce() 语法"></a>reduce() 语法</h3><blockquote>
<p>reduce 的发音：[rɪ’djuːs]。中文含义是减少，但这个方法跟“减少”没有任何关系。</p>
</blockquote>
<p>reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。返回值是回调函数累计处理的结果。</p>
<p><strong>语法</strong>：</p>
<pre class="highlight"><span class="line">arr.<span class="title function_">reduce</span>(<span class="keyword">function</span> (<span class="params">previousValue, currentValue, currentIndex, arr</span>) &#123;&#125;, initialValue);</span><br></pre>

<p>参数解释：</p>
<ul>
<li><p>previousValue：必填，上一次调用回调函数时的返回值</p>
</li>
<li><p>currentValue：必填，当前正在处理的数组元素</p>
</li>
<li><p>currentIndex：选填，当前正在处理的数组元素下标</p>
</li>
<li><p>arr：选填，调用 reduce()方法的数组</p>
</li>
<li><p>initialValue：选填，可选的初始值（作为第一次调用回调函数时传给 previousValue 的值）</p>
</li>
</ul>
<p>在以往的数组方法中，匿名的回调函数里是传三个参数：item、index、arr。但是在 reduce() 方法中，前面多传了一个参数<code>previousValue</code>，这个参数的意思是上一次调用回调函数时的返回值。第一次执行回调函数时，previousValue 没有值怎么办？可以用 initialValue 参数传给它。</p>
<p>备注：绝大多数人在一开始接触 reduce() 的时候会很懵逼，但是没关系，有事没事多看几遍，自然就掌握了。如果能熟练使用 reduce() 的用法，将能替代很多其他的数组方法，并逐渐走上进阶之路，领先于他人。</p>
<p>为了方便理解 reduce()，我们先来看看下面的简单代码，过渡一下：</p>
<pre class="highlight"><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>];</span><br><span class="line"></span><br><span class="line">arr1.<span class="title function_">reduce</span>(<span class="function">(<span class="params">prev, item</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(prev);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(item);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;------&#x27;</span>);</span><br><span class="line">    <span class="keyword">return</span> <span class="number">88</span>;</span><br><span class="line">&#125;, <span class="number">0</span>);</span><br></pre>

<p>打印结果：</p>
<pre class="highlight"><span class="line">0</span><br><span class="line">1</span><br><span class="line">------</span><br><span class="line">88</span><br><span class="line">2</span><br><span class="line">------</span><br><span class="line">88</span><br><span class="line">3</span><br><span class="line">------</span><br><span class="line">88</span><br><span class="line">4</span><br><span class="line">------</span><br><span class="line">88</span><br><span class="line">5</span><br><span class="line">------</span><br><span class="line">88</span><br><span class="line">6</span><br><span class="line">------</span><br></pre>

<p>上面的代码中，由于<code>return</code>的是固定值，所以 prev 打印的也是固定值（只有初始值是 0，剩下的遍历中，都是打印 88）。</p>
<p>现在来升级一下，实际开发中，prev 的值往往是动态变化的，这便是 reduce()的精妙之处。我们来看几个例子就明白了。</p>
<h3 id="reduce-的常见应用"><a href="#reduce-的常见应用" class="headerlink" title="reduce() 的常见应用"></a>reduce() 的常见应用</h3><p><strong>举例 1</strong>、求和：</p>
<p>计算数组中所有元素项的总和。代码实现：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> arr = [<span class="number">2</span>, <span class="number">0</span>, <span class="number">1</span>, <span class="number">9</span>, <span class="number">6</span>];</span><br><span class="line"><span class="comment">// 数组求和</span></span><br><span class="line"><span class="keyword">const</span> total = arr.<span class="title function_">reduce</span>(<span class="function">(<span class="params">prev, item</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> prev + item;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;total:&#x27;</span> + total); <span class="comment">// 打印结果：18</span></span><br></pre>

<p><strong>举例 2</strong>、统计某个元素出现的次数：</p>
<p>代码实现：</p>
<pre class="highlight"><span class="line"><span class="comment">// 定义方法：统一 value 这个元素在数组 arr 中出现的次数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">repeatCount</span>(<span class="params">arr, value</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!arr || arr.<span class="property">length</span> == <span class="number">0</span>) <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> arr.<span class="title function_">reduce</span>(<span class="function">(<span class="params">totalCount, item</span>) =&gt;</span> &#123;</span><br><span class="line">        totalCount += item == value ? <span class="number">1</span> : <span class="number">0</span>;</span><br><span class="line">        <span class="keyword">return</span> totalCount;</span><br><span class="line">    &#125;, <span class="number">0</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">6</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">1</span>, <span class="number">6</span>];</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">repeatCount</span>(arr1, <span class="number">6</span>)); <span class="comment">// 打印结果：3</span></span><br></pre>

<p><strong>举例 3</strong>、求元素的最大值：</p>
<p>代码实现：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> arr = [<span class="number">2</span>, <span class="number">0</span>, <span class="number">1</span>, <span class="number">9</span>, <span class="number">6</span>];</span><br><span class="line"><span class="comment">// 数组求最大值</span></span><br><span class="line"><span class="keyword">const</span> maxValue = arr.<span class="title function_">reduce</span>(<span class="function">(<span class="params">prev, item</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> prev &gt; item ? prev : item;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(maxValue); <span class="comment">// 打印结果：9</span></span><br></pre>

<p>参考链接：</p>
<ul>
<li><a target="_blank" rel="noopener" href="https://juejin.im/post/5d78aa3451882521397645ae">JS reduce 函数</a></li>
</ul>
<h2 id="数组练习"><a href="#数组练习" class="headerlink" title="数组练习"></a>数组练习</h2><h3 id="splice-练习：数组去重"><a href="#splice-练习：数组去重" class="headerlink" title="splice()练习：数组去重"></a>splice()练习：数组去重</h3><p>代码实现：</p>
<pre class="highlight"><span class="line"><span class="comment">//创建一个数组</span></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">2</span>, <span class="number">5</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">//去除数组中重复的数字</span></span><br><span class="line"><span class="comment">//获取数组中的每一个元素</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="comment">/*获取当前元素后的所有元素*/</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> j = i + <span class="number">1</span>; j &lt; arr.<span class="property">length</span>; j++) &#123;</span><br><span class="line">        <span class="comment">//console.log(&quot;----&gt;&quot;+arr[j]);</span></span><br><span class="line">        <span class="comment">//判断两个元素的值是否相等</span></span><br><span class="line">        <span class="keyword">if</span> (arr[i] == arr[j]) &#123;</span><br><span class="line">            <span class="comment">//如果相等则证明出现了重复的元素，则删除j对应的元素</span></span><br><span class="line">            arr.<span class="title function_">splice</span>(j, <span class="number">1</span>);</span><br><span class="line">            <span class="comment">//当删除了当前j所在的元素以后，后边的元素会自动补位</span></span><br><span class="line">            <span class="comment">//此时将不会再比较这个元素，我们需要再比较一次j所在位置的元素</span></span><br><span class="line">            <span class="comment">//使j自减</span></span><br><span class="line">            j--;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr);</span><br></pre>

<h3 id="清空数组"><a href="#清空数组" class="headerlink" title="清空数组"></a>清空数组</h3><p>清空数组，有以下几种方式：</p>
<pre class="highlight"><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"></span><br><span class="line">arr = []; <span class="comment">//方式1：推荐</span></span><br><span class="line">arr.<span class="property">length</span> = <span class="number">0</span>; <span class="comment">//方式2：length属性可以赋值，在其它语言中length是只读</span></span><br><span class="line">arr.<span class="title function_">splice</span>(<span class="number">0</span>); <span class="comment">//方式3：删除数组中所有元素。也可以写成 arr.splice(0, arr.length)</span></span><br></pre>

<h3 id="join-练习"><a href="#join-练习" class="headerlink" title="join() 练习"></a>join() 练习</h3><p><strong>问题</strong>：将一个字符串数组输出为<code>|</code>分割的形式，比如“千古|宿敌|素颜”。使用两种方式实现。</p>
<p>答案：</p>
<p>方式 1：（不推荐）</p>
<pre class="highlight"><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;千古&#x27;</span>, <span class="string">&#x27;宿敌&#x27;</span>, <span class="string">&#x27;素颜&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> str = arr[<span class="number">0</span>];</span><br><span class="line"><span class="keyword">var</span> separator = <span class="string">&#x27;|&#x27;</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    str += separator + arr[i]; <span class="comment">//从第1个数组元素开始，每个元素前面加上符号&quot;|&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str);</span><br></pre>

<p>输出结果：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180126_1336.png" class="lozad post-image"src="http://img.smyhvae.com/20180126_1336.png"></p>
<p>不推荐这种方式，因为：由于字符串的不变性，str 拼接过多的话，容易导致内存溢出（很多个 str 都堆放在栈里）。</p>
<p>方式 2：（推荐。通过 array 数组自带的 api 来实现）</p>
<pre class="highlight"><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;千古&#x27;</span>, <span class="string">&#x27;宿敌&#x27;</span>, <span class="string">&#x27;素颜&#x27;</span>];</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">join</span>(<span class="string">&#x27;|&#x27;</span>));</span><br></pre>

<p>结果：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180126_1339.png" class="lozad post-image"src="http://img.smyhvae.com/20180126_1339.png"></p>
<h3 id="reverse-练习"><a href="#reverse-练习" class="headerlink" title="reverse() 练习"></a>reverse() 练习</h3><p>题目：将一个字符串数组的元素的顺序进行反转，使用两种种方式实现。提示：第 i 个和第 length-i-1 个进行交换。</p>
<p>答案：</p>
<p>方式 1：</p>
<pre class="highlight"><span class="line"><span class="keyword">function</span> <span class="title function_">reverse</span>(<span class="params">array</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> newArr = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = array.<span class="property">length</span> - <span class="number">1</span>; i &gt;= <span class="number">0</span>; i--) &#123;</span><br><span class="line">        newArr[newArr.<span class="property">length</span>] = array[i];</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br></pre>

<p>方式 2：（算法里比较常见的方式）</p>
<pre class="highlight"><span class="line"><span class="keyword">function</span> <span class="title function_">reverse</span>(<span class="params">array</span>) &#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; array.<span class="property">length</span> / <span class="number">2</span>; i++) &#123;</span><br><span class="line">        <span class="keyword">var</span> temp = array[i];</span><br><span class="line">        array[i] = array[array.<span class="property">length</span> - <span class="number">1</span> - i];</span><br><span class="line">        array[array.<span class="property">length</span> - <span class="number">1</span> - i] = temp;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> array;</span><br><span class="line">&#125;</span><br></pre>

<p>方式 3：（数组自带的 reverse 方法）</p>
<p>现在我们学习了数组自带的 api，我们就可以直接使用 reverse()方法。</p>
<h3 id="练习：数组去重"><a href="#练习：数组去重" class="headerlink" title="练习：数组去重"></a>练习：数组去重</h3><p>问题：编写一个方法去掉一个数组中的重复元素。</p>
<p>分析：创建一个新数组，循环遍历，只要新数组中有老数组的值，就不用再添加了。</p>
<p>答案：</p>
<pre class="highlight"><span class="line"><span class="comment">//    编写一个方法 去掉一个数组的重复元素</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr);</span><br><span class="line"><span class="keyword">var</span> aaa = <span class="title function_">fn</span>(arr);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(aaa);</span><br><span class="line"><span class="comment">//思路：创建一个新数组，循环遍历，只要新数组中有老数组的值，就不用再添加了。</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">array</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> newArr = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; array.<span class="property">length</span>; i++) &#123;</span><br><span class="line">        <span class="comment">//开闭原则</span></span><br><span class="line">        <span class="keyword">var</span> bool = <span class="literal">true</span>;</span><br><span class="line">        <span class="comment">//每次都要判断新数组中是否有旧数组中的值。</span></span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; newArr.<span class="property">length</span>; j++) &#123;</span><br><span class="line">            <span class="keyword">if</span> (array[i] === newArr[j]) &#123;</span><br><span class="line">                bool = <span class="literal">false</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">if</span> (bool) &#123;</span><br><span class="line">            newArr[newArr.<span class="property">length</span>] = array[i];</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br></pre>

<h2 id="赞赏作者"><a href="#赞赏作者" class="headerlink" title="赞赏作者"></a>赞赏作者</h2><p>创作不易，你的赞赏和认可，是我更新的最大动力：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://img.smyhvae.com/20220401_1800.jpg" class="lozad post-image"src="https://img.smyhvae.com/20220401_1800.jpg"></p>

  </div>
  <div>
    
      <div 
        class="post-note note-warning copyright" 
        style="margin-top: 42px">
        <p>
          <span style="font-weight: bold;">作者：</span><a 
            target="_blank" 
            rel="nofollow noopener noreferrer" 
            href="/about">
            zwl5670
          </a>
        </p>
        <p>
          <span style="font-weight: bold;">文章链接：</span><a 
            target="_blank" 
            rel="nofollow noopener noreferrer" 
            href="https://zwl5670.gitee.io/2004/03/01/04-JavaScript%E5%9F%BA%E7%A1%80/19-%E6%95%B0%E7%BB%84%E7%9A%84%E5%B8%B8%E8%A7%81%E6%96%B9%E6%B3%95/">
            https://zwl5670.gitee.io/2004/03/01/04-JavaScript%E5%9F%BA%E7%A1%80/19-%E6%95%B0%E7%BB%84%E7%9A%84%E5%B8%B8%E8%A7%81%E6%96%B9%E6%B3%95/
          </a>
        </p>
        <p><span style="font-weight: bold;">版权声明：</span>本博客所有文章除特别声明外，均采用<a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">CC BY-NC-SA 4.0 协议</a>。转载请注明出处！</p>
      </div>
    
  </div>
</article>
<div class="nav">
  
    <div class="nav-item-prev">
      <a 
        href="/2004/03/01/04-JavaScript%E5%9F%BA%E7%A1%80/21-%E9%80%92%E5%BD%92%E5%87%BD%E6%95%B0/" 
        class="nav-link">
        <i class="iconfont icon-left nav-prev-icon"></i>
        <div>
          <div class="nav-label">上一篇</div>
          
            <div class="nav-title">21-递归函数 </div>
          
        </div>
      </a>
    </div>
  
  
    <div class="nav-item-next">
      <a 
        href="/2004/03/01/04-JavaScript%E5%9F%BA%E7%A1%80/22-%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0/" 
        class="nav-link">
        <div>
          <div class="nav-label">下一篇</div>
          
            <div class="nav-title">22-立即执行函数 </div>
          
        </div>
        <i class="iconfont icon-right nav-next-icon"></i>
      </a>
    </div>
  
</div>

<div 
  class="card card-content toc-card" 
  id="mobiletoc">
  <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95%E6%B8%85%E5%8D%95"><span class="toc-text">数组的方法清单</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E7%B1%BB%E5%9E%8B%E7%9B%B8%E5%85%B3"><span class="toc-text">数组的类型相关</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0%E7%9A%84%E6%B7%BB%E5%8A%A0%E5%92%8C%E5%88%A0%E9%99%A4"><span class="toc-text">数组元素的添加和删除</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E6%8E%92%E5%BA%8F"><span class="toc-text">数组排序</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9F%A5%E6%89%BE%E6%95%B0%E7%BB%84%E7%9A%84%E5%85%83%E7%B4%A0"><span class="toc-text">查找数组的元素</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84"><span class="toc-text">遍历数组</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#isArray-%EF%BC%9A%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E4%B8%BA%E6%95%B0%E7%BB%84"><span class="toc-text">isArray()：判断是否为数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E8%BD%AC%E6%8D%A2%E4%B8%BA%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-text">数组转换为字符串</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F1%E3%80%81toString"><span class="toc-text">方式1、toString()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-2"><span class="toc-text">方式 2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-3%EF%BC%9Ajoin-%E6%96%B9%E6%B3%95"><span class="toc-text">方式 3：join()方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#join"><span class="toc-text">join()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#split"><span class="toc-text">split()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Array-from-%EF%BC%9A%E5%B0%86%E4%BC%AA%E6%95%B0%E7%BB%84%E8%BD%AC%E6%8D%A2%E4%B8%BA%E7%9C%9F%E6%95%B0%E7%BB%84"><span class="toc-text">Array.from()：将伪数组转换为真数组</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BC%AA%E6%95%B0%E7%BB%84%E4%B8%8E%E7%9C%9F%E6%95%B0%E7%BB%84%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-text">伪数组与真数组的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BC%AA%E6%95%B0%E7%BB%84%E4%B8%BE%E4%BE%8B"><span class="toc-text">伪数组举例</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Array-of-%EF%BC%9A%E5%88%9B%E5%BB%BA%E6%95%B0%E7%BB%84"><span class="toc-text">Array.of()：创建数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0%E7%9A%84%E6%B7%BB%E5%8A%A0%E5%92%8C%E5%88%A0%E9%99%A4-1"><span class="toc-text">数组元素的添加和删除</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#push"><span class="toc-text">push()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#pop"><span class="toc-text">pop()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#unshift"><span class="toc-text">unshift()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#shift"><span class="toc-text">shift()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#splice"><span class="toc-text">splice()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#concat"><span class="toc-text">concat()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#slice"><span class="toc-text">slice()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#fill"><span class="toc-text">fill()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#reverse"><span class="toc-text">reverse()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#sort"><span class="toc-text">sort()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A0%E5%8F%82%E6%97%B6"><span class="toc-text">无参时</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%A6%E5%8F%82%E6%97%B6%EF%BC%8C%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8E%92%E5%BA%8F%E8%A7%84%E5%88%99"><span class="toc-text">带参时，自定义排序规则</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BE%E4%BE%8B%EF%BC%9A%E5%B0%86%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E6%95%B0%E5%AD%97%E6%8C%89%E7%85%A7%E4%BB%8E%E5%B0%8F%E5%88%B0%E5%A4%A7%E6%8E%92%E5%BA%8F"><span class="toc-text">举例：将数组中的数字按照从小到大排序</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BE%E4%BE%8B%EF%BC%9A%E5%B0%86%E6%95%B0%E7%BB%84%E4%BB%8E%E5%B0%8F%E5%88%B0%E5%A4%A7%E6%8E%92%E5%BA%8F"><span class="toc-text">举例：将数组从小到大排序</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#indexOf-%E5%92%8C-lastIndexOf-%EF%BC%9A%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9A%84%E7%B4%A2%E5%BC%95"><span class="toc-text">indexOf() 和 lastIndexOf()：获取元素的索引</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#includes"><span class="toc-text">includes()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#find-%E5%92%8CfindIndex"><span class="toc-text">find()和findIndex()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#find"><span class="toc-text">find()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#findIndex"><span class="toc-text">findIndex()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#every-%E5%92%8Csome"><span class="toc-text">every()和some()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#every"><span class="toc-text">every()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#some"><span class="toc-text">some()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#every-%E5%92%8C-some-%E7%9A%84%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-text">every() 和 some() 的使用场景</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#valueOf-%EF%BC%9A%E8%BF%94%E5%9B%9E%E6%95%B0%E7%BB%84%E6%9C%AC%E8%BA%AB"><span class="toc-text">valueOf()：返回数组本身</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84-1"><span class="toc-text">遍历数组</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A6%82%E5%BF%B5"><span class="toc-text">概念</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#for-%E5%BE%AA%E7%8E%AF%E9%81%8D%E5%8E%86"><span class="toc-text">for 循环遍历</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#forEach"><span class="toc-text">forEach()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95"><span class="toc-text">语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#forEach-%E4%BC%9A%E4%B8%8D%E4%BC%9A%E6%94%B9%E5%8F%98%E5%8E%9F%E6%95%B0%E7%BB%84%EF%BC%9F"><span class="toc-text">forEach() 会不会改变原数组？</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#for-of"><span class="toc-text">for of</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95-1"><span class="toc-text">语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8D%E8%A6%81%E4%BD%BF%E7%94%A8-for-in-%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84"><span class="toc-text">不要使用 for in 遍历数组</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#map"><span class="toc-text">map()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95-2"><span class="toc-text">语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#map-%E6%96%B9%E6%B3%95%E4%BC%9A%E4%B8%8D%E4%BC%9A%E6%94%B9%E5%8F%98%E5%8E%9F%E6%95%B0%E7%BB%84%EF%BC%9F"><span class="toc-text">map() 方法会不会改变原数组？</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#filter"><span class="toc-text">filter()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#reduce"><span class="toc-text">reduce()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#reduce-%E8%AF%AD%E6%B3%95"><span class="toc-text">reduce() 语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#reduce-%E7%9A%84%E5%B8%B8%E8%A7%81%E5%BA%94%E7%94%A8"><span class="toc-text">reduce() 的常见应用</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%BB%83%E4%B9%A0"><span class="toc-text">数组练习</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#splice-%E7%BB%83%E4%B9%A0%EF%BC%9A%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D"><span class="toc-text">splice()练习：数组去重</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%85%E7%A9%BA%E6%95%B0%E7%BB%84"><span class="toc-text">清空数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#join-%E7%BB%83%E4%B9%A0"><span class="toc-text">join() 练习</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#reverse-%E7%BB%83%E4%B9%A0"><span class="toc-text">reverse() 练习</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%83%E4%B9%A0%EF%BC%9A%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D"><span class="toc-text">练习：数组去重</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85"><span class="toc-text">赞赏作者</span></a></li></ol>
</div>
            </main>
            <aside class="right-column">
              <div class="sticky-widescreen">
  
  
    <article class="card card-content toc-card">
      <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95%E6%B8%85%E5%8D%95"><span class="toc-text">数组的方法清单</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E7%B1%BB%E5%9E%8B%E7%9B%B8%E5%85%B3"><span class="toc-text">数组的类型相关</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0%E7%9A%84%E6%B7%BB%E5%8A%A0%E5%92%8C%E5%88%A0%E9%99%A4"><span class="toc-text">数组元素的添加和删除</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E6%8E%92%E5%BA%8F"><span class="toc-text">数组排序</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9F%A5%E6%89%BE%E6%95%B0%E7%BB%84%E7%9A%84%E5%85%83%E7%B4%A0"><span class="toc-text">查找数组的元素</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84"><span class="toc-text">遍历数组</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#isArray-%EF%BC%9A%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E4%B8%BA%E6%95%B0%E7%BB%84"><span class="toc-text">isArray()：判断是否为数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E8%BD%AC%E6%8D%A2%E4%B8%BA%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-text">数组转换为字符串</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F1%E3%80%81toString"><span class="toc-text">方式1、toString()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-2"><span class="toc-text">方式 2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-3%EF%BC%9Ajoin-%E6%96%B9%E6%B3%95"><span class="toc-text">方式 3：join()方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#join"><span class="toc-text">join()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#split"><span class="toc-text">split()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Array-from-%EF%BC%9A%E5%B0%86%E4%BC%AA%E6%95%B0%E7%BB%84%E8%BD%AC%E6%8D%A2%E4%B8%BA%E7%9C%9F%E6%95%B0%E7%BB%84"><span class="toc-text">Array.from()：将伪数组转换为真数组</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BC%AA%E6%95%B0%E7%BB%84%E4%B8%8E%E7%9C%9F%E6%95%B0%E7%BB%84%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-text">伪数组与真数组的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BC%AA%E6%95%B0%E7%BB%84%E4%B8%BE%E4%BE%8B"><span class="toc-text">伪数组举例</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Array-of-%EF%BC%9A%E5%88%9B%E5%BB%BA%E6%95%B0%E7%BB%84"><span class="toc-text">Array.of()：创建数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0%E7%9A%84%E6%B7%BB%E5%8A%A0%E5%92%8C%E5%88%A0%E9%99%A4-1"><span class="toc-text">数组元素的添加和删除</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#push"><span class="toc-text">push()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#pop"><span class="toc-text">pop()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#unshift"><span class="toc-text">unshift()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#shift"><span class="toc-text">shift()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#splice"><span class="toc-text">splice()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#concat"><span class="toc-text">concat()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#slice"><span class="toc-text">slice()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#fill"><span class="toc-text">fill()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#reverse"><span class="toc-text">reverse()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#sort"><span class="toc-text">sort()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A0%E5%8F%82%E6%97%B6"><span class="toc-text">无参时</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%A6%E5%8F%82%E6%97%B6%EF%BC%8C%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8E%92%E5%BA%8F%E8%A7%84%E5%88%99"><span class="toc-text">带参时，自定义排序规则</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BE%E4%BE%8B%EF%BC%9A%E5%B0%86%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E6%95%B0%E5%AD%97%E6%8C%89%E7%85%A7%E4%BB%8E%E5%B0%8F%E5%88%B0%E5%A4%A7%E6%8E%92%E5%BA%8F"><span class="toc-text">举例：将数组中的数字按照从小到大排序</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BE%E4%BE%8B%EF%BC%9A%E5%B0%86%E6%95%B0%E7%BB%84%E4%BB%8E%E5%B0%8F%E5%88%B0%E5%A4%A7%E6%8E%92%E5%BA%8F"><span class="toc-text">举例：将数组从小到大排序</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#indexOf-%E5%92%8C-lastIndexOf-%EF%BC%9A%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9A%84%E7%B4%A2%E5%BC%95"><span class="toc-text">indexOf() 和 lastIndexOf()：获取元素的索引</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#includes"><span class="toc-text">includes()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#find-%E5%92%8CfindIndex"><span class="toc-text">find()和findIndex()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#find"><span class="toc-text">find()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#findIndex"><span class="toc-text">findIndex()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#every-%E5%92%8Csome"><span class="toc-text">every()和some()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#every"><span class="toc-text">every()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#some"><span class="toc-text">some()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#every-%E5%92%8C-some-%E7%9A%84%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-text">every() 和 some() 的使用场景</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#valueOf-%EF%BC%9A%E8%BF%94%E5%9B%9E%E6%95%B0%E7%BB%84%E6%9C%AC%E8%BA%AB"><span class="toc-text">valueOf()：返回数组本身</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84-1"><span class="toc-text">遍历数组</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A6%82%E5%BF%B5"><span class="toc-text">概念</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#for-%E5%BE%AA%E7%8E%AF%E9%81%8D%E5%8E%86"><span class="toc-text">for 循环遍历</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#forEach"><span class="toc-text">forEach()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95"><span class="toc-text">语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#forEach-%E4%BC%9A%E4%B8%8D%E4%BC%9A%E6%94%B9%E5%8F%98%E5%8E%9F%E6%95%B0%E7%BB%84%EF%BC%9F"><span class="toc-text">forEach() 会不会改变原数组？</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#for-of"><span class="toc-text">for of</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95-1"><span class="toc-text">语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8D%E8%A6%81%E4%BD%BF%E7%94%A8-for-in-%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84"><span class="toc-text">不要使用 for in 遍历数组</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#map"><span class="toc-text">map()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95-2"><span class="toc-text">语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#map-%E6%96%B9%E6%B3%95%E4%BC%9A%E4%B8%8D%E4%BC%9A%E6%94%B9%E5%8F%98%E5%8E%9F%E6%95%B0%E7%BB%84%EF%BC%9F"><span class="toc-text">map() 方法会不会改变原数组？</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#filter"><span class="toc-text">filter()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#reduce"><span class="toc-text">reduce()</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#reduce-%E8%AF%AD%E6%B3%95"><span class="toc-text">reduce() 语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#reduce-%E7%9A%84%E5%B8%B8%E8%A7%81%E5%BA%94%E7%94%A8"><span class="toc-text">reduce() 的常见应用</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%BB%83%E4%B9%A0"><span class="toc-text">数组练习</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#splice-%E7%BB%83%E4%B9%A0%EF%BC%9A%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D"><span class="toc-text">splice()练习：数组去重</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%85%E7%A9%BA%E6%95%B0%E7%BB%84"><span class="toc-text">清空数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#join-%E7%BB%83%E4%B9%A0"><span class="toc-text">join() 练习</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#reverse-%E7%BB%83%E4%B9%A0"><span class="toc-text">reverse() 练习</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%83%E4%B9%A0%EF%BC%9A%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D"><span class="toc-text">练习：数组去重</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85"><span class="toc-text">赞赏作者</span></a></li></ol>
    </article>
  
  
  <article class="card card-content">
    <div class="recent-posts-card">
  <div class="recent-posts-header">
    <i 
      class="iconfont icon-wenzhang_huaban" 
      style="padding-right: 2px;">
    </i>最近文章
  </div>
  <div class="recent-posts-list">
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2023-03-09</div>
        <a href="/2023/03/09/13-React%E5%9F%BA%E7%A1%80/11-React%20Navive%E5%88%9D%E8%AF%86/"><div class="recent-posts-item-content">11-React Navive初识</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2023-03-09</div>
        <a href="/2023/03/09/13-React%E5%9F%BA%E7%A1%80/10-AntD%E6%A1%86%E6%9E%B6%E7%9A%84upload%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87%E6%97%B6%E4%BD%BF%E7%94%A8customRequest%E6%96%B9%E6%B3%95%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%8A%E4%BC%A0%E8%A1%8C%E4%B8%BA/"><div class="recent-posts-item-content">10-AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2023-03-09</div>
        <a href="/2023/03/09/13-React%E5%9F%BA%E7%A1%80/09-AntD%E6%A1%86%E6%9E%B6%E7%9A%84upload%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87%E6%97%B6%E9%81%87%E5%88%B0%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9D%91/"><div class="recent-posts-item-content">09-AntD框架的upload组件上传图片时遇到的一些坑</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2023-03-09</div>
        <a href="/2023/03/09/13-React%E5%9F%BA%E7%A1%80/08-Ant%20Design%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/"><div class="recent-posts-item-content">08-Ant Design的基本使用</div></a>
      </div>
    
  </div>
</div>
  </article>
  
  
</div>
            </aside>
          </div>
        </div>
      </div>
    </div>
     
    <footer class="footer">
  <div class="footer-container">
    <div>
      <div class="footer-dsc">
        <span>
          Copyright ©
          
            2023
          
          
        </span>
        &nbsp;
        <a 
          href="/" 
          class="footer-link">
          前端面试
        </a>
      </div>
    </div>

    
      <div class="footer-dsc">
        
          Powered by
          <a 
            href="https://hexo.io/" 
            class="footer-link" 
            target="_blank" 
            rel="nofollow noopener noreferrer">
            &nbsp;Hexo
          </a>
        
        
          <span>&nbsp;|&nbsp;</span>
        
        
          Theme -
          <a 
            href="https://github.com/theme-kaze" 
            class="footer-link" 
            target="_blank"
            rel="nofollow noopener noreferrer">
            &nbsp;Kaze
          </a>
        
      </div>
    
    
    
    
</footer>
 
    
  <a 
    role="button" 
    id="scrollbutton" 
    class="basebutton" 
    aria-label="回到顶部">
    <i class="iconfont icon-arrowleft button-icon"></i>
  </a>

<a 
  role="button" 
  id="menubutton"
  aria-label="menu button"
  class="basebutton">
  <i class="iconfont icon-menu button-icon"></i>
</a>
<a 
  role="button" 
  id="popbutton" 
  class="basebutton" 
  aria-label="控制中心">
  <i class="iconfont icon-expand button-icon"></i>
</a>
<a 
  role="button" 
  id="darkbutton" 
  class="basebutton darkwidget" 
  aria-label="夜色模式">
  <i class="iconfont icon-weather button-icon"></i>
</a>
<a 
  role="button" 
  id="searchbutton" 
  class="basebutton searchwidget" 
  aria-label="搜索">
  <i class="iconfont icon-search button-icon"></i>
</a> 
     
     
     
      <script>
  var addImgLayout = function () {
    var img = document.querySelectorAll('.post-content img')
    var i
    for (i = 0; i < img.length; i++) {
      var wrapper = document.createElement('a')
      wrapper.setAttribute('href', img[i].getAttribute('data-src'))
      wrapper.setAttribute('aria-label', 'illustration')
      wrapper.style.cssText =
        'width: 100%; display: flex; justify-content: center;'
      if (img[i].alt) wrapper.dataset.caption = img[i].alt
      wrapper.dataset.nolink = true
      img[i].before(wrapper)
      wrapper.append(img[i])
      var divWrap = document.createElement('div')
      divWrap.classList.add('gallery')
      wrapper.before(divWrap)
      divWrap.append(wrapper)
    }
    baguetteBox.run('.gallery')
  }
</script>
<script>
  loadScript(
    "/js/lib/lightbox/baguetteBox.min.js",
    addImgLayout
  )
</script>
 
     
     
    <script src="/js/main.js"></script> 
     
    
      <script>
        var addLazyload = function () {
          var observer = lozad('.lozad', {
            load: function (el) {
              el.srcset = el.getAttribute('data-src')
            },
            loaded: function (el) {
              el.classList.add('loaded')
            },
          })
          observer.observe()
        }
      </script>
      <script>
        loadScript('/js/lib/lozad.min.js', addLazyload)
      </script>
    
    <script src="//instant.page/5.1.0" type="module"
      integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
    
    
  </body>
</html>
